React中使用useState管理对象状态时更新异常的原因排查

嘿，这个问题我太熟了！其实这完全是React useState的异步更新特性加上JavaScript闭包带来的典型陷阱，咱们把它掰碎了说：

问题根源：闭包捕获旧状态 + 异步批量更新 #

当你调用setMyState的时候，React并不会立刻把myState变量更新为新值，而是把这个更新请求放进一个更新队列里，等当前代码执行完后，再批量处理这些更新。

这就导致了一个关键问题：在同步代码的多次setMyState调用中，每个调用里的myState都是闭包捕获的「更新前的旧值」。

举个具体的例子看你的代码：

1. 初始状态是{bulb1state: true, bulb2state: true}
2. 第一次调用setMyState({...myState, bulb1state: false})：这里的myState还是初始值，生成新状态{bulb1state: false, bulb2state: true}，但这个新值并没有立刻同步到myState变量里
3. 紧接着第二次调用setMyState({...myState, bulb2state: false})：此时myState依然是初始的{bulb1state: true, bulb2state: true}，所以生成的新状态是{bulb1state: true, bulb2state: false}，直接覆盖了第一次的更新结果

所以最终状态不是你预期的两个false，而是只有bulb2state变成了false，这完全是因为第二次更新没用到第一次更新后的状态。

解决方案：使用函数式更新 #

要解决这个问题，你需要给setMyState传递一个函数而不是直接传对象。这个函数会接收当前最新的状态作为参数，你基于这个最新状态来生成新状态，就能保证每次更新都是基于上一次的最新结果。

修改后的代码应该是这样：

// 第一次更新：基于最新状态修改bulb1state
setMyState(prevState => ({...prevState, bulb1state: false}))
// 第二次更新：基于第一次更新后的最新状态修改bulb2state
setMyState(prevState => ({...prevState, bulb2state: false}))

这样第二次更新时，prevState就是第一次更新后的{bulb1state: false, bulb2state: true}，最终生成的状态就是你想要的{bulb1state: false, bulb2state: false}。

额外提醒 #

这种情况是React的正常设计，不是bug——批量更新是React为了性能优化做的处理。除了连续同步更新的场景，在setTimeout、异步请求回调这类异步代码里，也可能遇到类似的闭包问题，这时候函数式更新同样是最优解。

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