使用immutability-helper多源异步更新React状态失效问题求解

嘿，我来帮你拆解下这个问题——你遇到的情况其实是React异步状态更新的常见坑，和immutability-helper本身关系不大，核心是你更新状态的方式没适配React的异步特性。

问题原因 #

当你从多个API异步获取数据，然后在回调里直接用this.state来生成新状态时，就会出现“只有最后一个更新生效”的问题。因为React的setState是异步且批量处理的，当多个API的回调触发时，它们拿到的this.state大概率都是更新前的旧值。举个例子，假设你的初始状态是{ source1: null, source2: null }：

// 错误的写法（你可能就是这么写的）
fetch('/api/source1').then(res => res.json()).then(data => {
  this.setState(update(this.state, { source1: { $set: data } }));
});

fetch('/api/source2').then(res => res.json()).then(data => {
  this.setState(update(this.state, { source2: { $set: data } }));
});

第一个回调里的this.state是初始值，更新后状态应该是{ source1: data1, source2: null }，但第二个回调拿到的this.state还是初始的{ source1: null, source2: null }，所以它生成的新状态是{ source1: null, source2: data2 }，直接把第一个更新覆盖了，最后就只有source2的更新生效。

正确的处理方式 #

改用函数式更新，也就是给setState传递一个函数，这个函数会接收React维护的当前最新状态作为参数，你基于这个最新状态来生成新状态，就能避免覆盖问题。

用immutability-helper的正确写法如下：

// 正确的写法
fetch('/api/source1').then(res => res.json()).then(data => {
  this.setState(prevState => update(prevState, {
    source1: { $set: data }
  }));
});

fetch('/api/source2').then(res => res.json()).then(data => {
  this.setState(prevState => update(prevState, {
    source2: { $set: data }
  }));
});

这里的prevState是React确保的最新状态，不管两个回调触发的先后顺序如何，每次更新都会基于上一次的最新结果来修改。比如第一个更新后状态变成{ source1: data1, source2: null }，第二个更新拿到的prevState就是这个值，生成的新状态就是{ source1: data1, source2: data2 }，两个数据源的更新都能正确保留。

拓展：复杂状态更新的处理 #

如果你的状态是嵌套结构或者数组，immutability-helper的其他操作（比如$push、$merge、$splice）也可以用同样的方式，只要始终基于prevState来修改：

// 向数组中追加新数据的示例
fetch('/api/items').then(res => res.json()).then(newItems => {
  this.setState(prevState => update(prevState, {
    itemList: { $push: newItems }
  }));
});

总结一下：核心就是别直接用this.state来做异步状态更新的基础，改用函数式更新依赖prevState，就能保证多个异步更新不会互相覆盖啦。

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