我正在开发一个反应库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事件，每当卡中的数据发生更改时，该事件就会触发。我能够成功地获取卡中的数据。但我如何将数据保存到本地存储中，以便下次刷新页面时，数据就在浏览器上。
你可以在这里找到图书馆
谢谢你的帮助。
来吧，你可能不需要cookie
您需要的是一个cookie。
尝试使用react cookie或您觉得新奇的react cookie。
如果在使用类组件时使用
react-cookie，则需要以<CookiesProvider/>包装您的应用程序并使用更高阶分量CCD_ 6方法。
您应该尝试使用useEffect，当您启动应用程序时，您应该首先检查您的localStorage是否有任何数据，即从中检索，如果没有，您只需启动新的。
请确保不要直接与localStorage通话，而是使用useState使用retrievedObject的副本，以便它能够做出响应。
这不是一项完整的工作，但它给了你的想法
您可以使用React生命周期组件Didmount和本地存储中的getItem，然后设置数据状态，并在组件中使用它。