如何使用Immutability Helper在React JS中更新多个状态

这个问题我之前也踩过坑，核心原因是React的setState是异步批量更新的，再加上你直接用this.state作为更新的基础，导致两次更新都基于同一个旧状态，后一次的修改直接覆盖了前一次的。

问题分析 #

当你连续调用updateL0和updateL1时：

1. 第一次调用updateL0，用的是当前的this.state（初始值{l0: null, l1: null}）生成新状态{l0: 预期值, l1: null}，但此时this.state还没真正更新；
2. 紧接着调用updateL1，还是用原来的this.state（依然是{l0: null, l1: null}）生成新状态{l0: null, l1: 预期值}；
3. React批量处理这两个setState时，最后只会保留最后一次生成的状态，所以就出现了只有最后一个状态生效的情况。

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

React的setState支持传入一个函数，这个函数会接收当前最新的状态快照作为参数，这样每次更新都是基于最新的状态生成新值，不会出现覆盖问题。修改你的代码如下：

state: { l0: null, l1: null }

updateL0 = (l0) => {
  if(l0){
    // 用prevState替代this.state，确保基于最新状态更新
    this.setState(prevState => update(prevState, { l0: { $set: l0 } }));
  }
};

updateL1 = (l1) => {
  if(l1){
    this.setState(prevState => update(prevState, { l1: { $set: l1 } }));
  }
};

另一种思路：合并单次更新 #

如果你的业务场景允许，也可以把两个状态的更新合并成一次setState调用，这样自然不会有覆盖问题：

// 假设你同时拿到了l0和l1的新值
const newL0 = 'l0的预期值';
const newL1 = 'l1的预期值';

this.setState(update(this.state, {
  l0: { $set: newL0 },
  l1: { $set: newL1 }
}));

为什么函数式更新能解决问题？ #

因为React在批量处理setState时，会按顺序执行你传入的更新函数，每个函数都能拿到上一次更新后的最新状态，这样两次更新就会基于前一次的结果叠加，而不是都基于同一个旧状态。

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