javascript - 最后 'SetItem' 不保存，页面刷新时清除

Question

每次单击箭头时，React 状态都会保存在本地ٍ 存储中
但是当你刷新页面时，值会减少 1，因为最后的更改没有保存到本地存储
如果修改多个项目，问题将在最后按下的项目The Code is here => https://codesandbox.io/s/solitary-currying-jb2gx?file=/src/App.js

Answer 1

您正在调用序列化函数 setLocalStorage()在使用 upvote 更新状态之前。 setState 函数是异步的，状态更新由 React 批量处理，因此不会立即更改。您应该调用 setLocalStorage()在 setState 的第二个参数(回调)中。然后在调用它时，您将拥有正确的状态。
像这样:

upVote = (id, delta) => {
  this.setState(
    (e) => ({
      text: e.text.map((x) =>
        x.id === id ? { ...x, vote: x.vote + delta } : x
      ),
      time: this.state.time
    }),
    () => this.setLocalStorage()
  );
};

您也可以将函数本身作为 setState 的第二个参数传递:

...
   time: this.state.time
    }),
    this.setLocalStorage
  );
}