javascript - 如何在本地存储中存储状态以进行 react ？

Question

我正在尝试将复选框选中的值存储到我的 react 应用程序中的本地存储中。但每次我存储时，它都会存储以前的状态。下面是我的代码:

对于渲染端:

  render () {   
    return (
                      <Checkbox
                        checked={this.state.checkedCheckpoint}
                        onChange={() => this.onChange('checkpoint')}
                      >
                      </Checkbox>
          )

对于 onchange 方法:

  onChange (value){
    const { checkedCheckpoint } = this.state

    if (value === 'checkpoint')
    {
      if (checkedCheckpoint)
      {
        this.setState({checkedCheckpoint : false})
        console.log(checkedCheckpoint)
      }
      else
      {
        this.setState({checkedCheckpoint : true})
        console.log(checkedCheckpoint)
      }
    }
    localStorage.setObject('checkedCheckpoint', checkedCheckpoint)

我所说的先前状态是指: 如果我将检查点初始化为 true，那么在取消检查后，我应该得到 checkpoint: false 对吗？但我得到了 checkedCheckpoint: true。如果我检查了它，我应该得到 checkedCheckpoint: true 对吗？我将得到 checkedCheckpoint: false。似乎它总是遵循本地存储中的先前状态。有谁知道出了什么问题吗？

Answer 1

您需要将要执行状态更改后的任何逻辑作为第二个参数传递给 this.setState()

示例:

state = {
    name: 'Johnny'
}

someMethod = () => {
     this.setState({name: 'Tim'})
     doSomethingElse(this.state.name) //doSomethingElse receives Johnny
}

我想你正在寻找的是

state = {
    name: 'Johnny'
}

someMethod = () => {
    this.setState({name: 'Tim'}, doSomethingElse(this.state.name))
    //doSomethingElse receives Tim
}

请参阅 setState 的文档 here .