如何將狀態存儲在本地存儲中以作出反應？

Question

我正在嘗試將我的復選框檢查值存儲到我的React應用程序中的localstorage中。 但是每次我存儲時，它將存儲以前的狀態。 下面是我的代碼：

對於渲染面：

  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的文檔。

Answer 2

您需要根據新值而不是舊值進行設置

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

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

Answer 3

React嘗試批處理setState命令。 它更像是一個異步任務。 因此，當您執行this.setState（{checkedCheckpoint：true}）時，它只會告訴將“ checkedCheckpoint”的狀態設置為true的反應，但此時不會執行該命令。 因此，基本上，當您嘗試設置localStorage變量時，它仍然是先前的狀態。

嘗試在這樣的變量中設置新狀態。

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

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

Answer 4

也許，您可以執行以下操作：

<Checkbox
    checked={this.state.checkedCheckpoint}
    onChange={() => this.setState((prevState) => ({checkedCheckpoint: !prevState.checkedCheckpoint}),
    () =>{console.log(this.state.checkedCheckpoint)})}
>
</Checkbox>           

另外，您的代碼的問題在於，它沒有考慮到react setState中的state 異步發生的事實。 因此，它在記錄時將始終顯示以前的狀態。