在 react.js 中将 prop 数据存储在本地存储中

Question

我正在开发一个反应库react-trello 并尝试将数据保存到本地存储。

我的代码：

 import React, {Component} from 'react'
 import Board from 'react-trello'
 import './App.css'

class NewCardForm extends Component {
  handleAdd = () => this.props.onAdd({title: this.titleRef.value, description: this.descRef.value, label: this.label.value})
  setTitleRef = (ref) => this.titleRef = ref
  setDescRef = (ref) => this.descRef = ref
  setLabelRef = (ref) => this.label = ref
  render() {
  const {onCancel} = this.props
  return (
   <div style={{background: 'white', borderRadius: 3, border: '1px solid #eee', borderBottom: '1px solid #ccc'}}>
    <div style={{padding: 5, margin: 5}}>
      <div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setTitleRef} placeholder="User" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setDescRef} placeholder="Task Description" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setLabelRef} placeholder="Date" />
        </div>
      </div>
      <button onClick={this.handleAdd}>Add</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  </div>
    ) 
  }
}


 function App() {

  const data = {
   lanes: [
   {
    id: 'board1',
    title: 'Incompleted Tasks',
    current: "70", // custom property
    target: "100", // custom property
    label: 'First board here',
    cards: [
      {
        id: 'Card1',
        title: 'Abhishek',
        description: 'Thanks. Please schedule me for an estimate on Monday.'
      },
      {
        id: 'Card2',
        title: 'Rohan',
        description: 'Email received at 1:14pm'
      }
    ]
   },
   {
    id: 'board2',
    title: 'Completed Tasks',
    label: 'Second board here',
    current: "30", // custom property
    target: "100", // custom property
    cards: [
      {
        id: 'Card3',
        title: 'Rachit',
        description: 'You are welcome. Interested in doing business with you again',
       }
       ]
      }
    ]
  }

  localStorage.setItem('data', JSON.stringify(data));
  var retrievedObject = localStorage.getItem('data');
  console.log('data: ', JSON.parse(retrievedObject));

  return (
   <div className="app">
      <h1>Notion to organize</h1>
    <p>
      Your team’s long term memory, all in one spot.Organize anything, together.
    </p>

    <Board
      onDataChange={(newData) => {console.log(newData)}}
      onCardAdd={(card) => {localStorage.setItem('data', JSON.stringify(card));
                        var retrievedObject = localStorage.getItem('data');
                        console.log(retrievedObject)}}
      style={{backgroundColor: '#FFFEFC'}}
      canAddLanes
      editable
      laneDraggable
      laneStyle={{backgroundColor: '#F9F5F1', marginRight: '50px', paddingTop: '20px'}}
      cardDraggable
      draggable
      data={JSON.parse(retrievedObject)}
      collapsibleLanes
      components={{NewCardForm: NewCardForm}} 
    >
  
      </Board>
    </div>
  )
}

export default App

目前我正在将data 渲染到显示板。我正在调用onCardAdd 事件，只要卡中的数据发生更改，就会触发该事件。我成功地能够在卡内获取数据。但是如何将这些数据保存到本地存储中，以便下次刷新页面时，浏览器上的数据就在那里。

你可以在这里找到图书馆。react-trello

感谢您的帮助。

Answer 1

来吧，你可能不需要cookie

你需要的是一个 cookie。

尝试使用您喜欢的react-cookie 或react-cookies。

如果您在使用类组件时使用react-cookie，则需要 将您的应用程序包装在 <CookiesProvider/> 中并使用更高阶 组件withCookies() 方法。

你应该尝试使用useEffect，当你启动你的应用程序时，你应该首先检查你的localStorage，如果你有任何数据，即从中检索，如果你没有，你只需启动新的。

确保您不直接与localStorage 交谈，而是通过useState 使用retrievedObject 的副本，以便它可以响应。

this 不是完整的作品，但它给了你想法

Answer 2

你可以使用本地存储中的 React 生命周期 componentDidmount 和 getItem，然后 setState 数据，并在你的组件中使用它。