React状态更新未即时同步至LocalStorage问题求助

嘿，这个问题我之前也碰到过！核心原因是React的setState是异步执行的——你调用setState之后，React并不会立刻更新组件的状态，而是把状态更新加入队列，等合适的时机才会批量处理。所以你紧接着调用localStorage.setItem的时候，this.state还是原来的旧值，自然存进去的不是你想要的新状态啦。

解决方案1：利用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，会在状态更新完成、组件重新渲染后执行，这时候访问this.state就能拿到最新的状态值了。修改你的代码如下：

testFunction = (test) => {
  this.setState(
    { testState: [...this.state.testState, test] },
    // 状态更新完成后执行的回调
    () => {
      localStorage.setItem("dummy", this.state.testState.toString());
    }
  );
}

更可靠的写法：函数式更新 #

如果你的状态更新依赖于之前的状态（比如这里是往数组里加新元素），更推荐用函数式的setState，这样能确保你基于最新的前状态计算新状态，避免异步带来的状态不一致问题：

testFunction = (test) => {
  this.setState(
    // 用prevState获取更新前的最新状态
    (prevState) => ({ testState: [...prevState.testState, test] }),
    () => {
      localStorage.setItem("dummy", this.state.testState.toString());
    }
  );
}

这样修改后，当你调用testFunction时，状态更新完成后才会把新的testState存入LocalStorage，就能拿到正确的新值啦。

内容的提问来源于stack exchange，提问作者Sallu