React中如何在循环内向数组插入数据并为多个属性执行setState？

问题原因 #

• setState 是异步批量更新的，你在forEach循环里连续调用setState时，每次读取的this.state都是循环开始前的初始值（也就是三个数组都是空数组），不会因为前一次调用setState就立刻更新。所以最后相当于只有最后一次的setState生效，最终三个数组都只会存储result最后一项的对应值，和你预期不符。

修复方案 #

方案1：先计算好最终的状态值，只调用一次setState（更推荐，性能更好）

先遍历result把三个数组的值先拼接完成，再一次性更新状态：

someFunction() {
  let result = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 }
  ];
  // 预先计算最终的三个数组
  const newA = [];
  const newB = [];
  const newC = [];
  result.forEach(item => {
    newA.push(item.a);
    newB.push(item.b);
    newC.push(item.c);
  })
  // 单次更新状态
  this.setState({
    aArr: newA,
    bArr: newB,
    cArr: newC
  })
}

方案2：使用setState的函数式更新写法

如果业务逻辑确实需要分次更新，要使用setState接收函数的写法，函数的第一个参数是上一次更新完成的最新状态，保证每次更新都是基于上一次的结果：

someFunction() {
  let result = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 }
  ];
  result.forEach((item) => {
    this.setState(prevState => ({
      aArr: [...prevState.aArr, item.a],
      bArr: [...prevState.bArr, item.b],
      cArr: [...prevState.cArr, item.c]
    }));
  });
}

两种方案都可以得到你预期的输出结果，方案1不需要多次触发状态更新，性能更好，更推荐使用。

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