React类组件中setState调用后state未即时更新的原因咨询

嘿，这个问题我太熟啦！核心原因就是React类组件中的setState是异步操作，不是同步更新的～

当你调用this.setState({ totalSum: 12 })时，React并不会立刻修改this.state的值，而是把这个更新请求加入到一个更新队列中，等当前的事件处理逻辑执行完（也就是你的alert执行完之后），才会批量处理队列里的更新，更新组件的state并触发重新渲染。所以你在setState之后立刻alert(this.state.totalSum)，拿到的肯定还是更新前的旧值1000000。

解决办法有两种常用方式： #

1. 使用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，它会在state更新完成、组件重新渲染后执行。在这个回调里访问this.state，就能拿到最新的值了：

handleCallback = () => {
  this.setState({ totalSum: 12 }, () => {
    alert('totalSum ' + this.state.totalSum); // 这里会正确显示12
  });
};

2. 利用componentDidUpdate生命周期 #

如果你的逻辑需要在state更新后统一处理（比如多个地方都会修改totalSum），可以用componentDidUpdate生命周期方法，它会在组件更新完成后触发：

componentDidUpdate(prevProps, prevState) {
  // 建议先对比新旧state，避免不必要的重复执行
  if (prevState.totalSum !== this.state.totalSum) {
    alert('totalSum ' + this.state.totalSum);
  }
}

handleCallback = () => {
  this.setState({ totalSum: 12 });
};

补充个小知识点：setState的异步特性只存在于React的合成事件（比如你的这个handleCallback）和生命周期函数中。如果是在原生DOM事件或者setTimeout这类异步函数里调用setState，它会变成同步更新，但你的场景明显属于前者，所以会遇到异步的问题。

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