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

问题描述

我正在使用反应库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
    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

谢谢您的帮助。

解决方法

加入它，您可能不需要Cookie

您需要的是Cookie。

尝试使用react-cookie或react-cookies觉得不错的东西。

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

您应尝试使用useEffect，在启动应用程序时，应首先检查localStorage是否有任何数据（即从中检索），如果没有，则只需启动新的。

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

this尚未完成，但可以为您提供想法

,

您可以在本地存储中使用React生命周期componentDidmount和getItem，然后对数据进行设置状态，并在您的组件中使用。