React：如何基于旧状态更新状态？数组对象状态更新失败排查

看起来你在React状态更新这里踩了几个常见的坑，我帮你拆解一下问题所在，然后给出修复方案：

问题分析 #

你的代码主要有三个关键问题：

1. setState回调函数的参数错误 #

你在setState的回调里写了(prevState, newEmployer)，但实际上setState的回调函数只接受两个固定参数：prevState（上一次的状态快照）和props（当前组件的props）。这里你把外部传入的newEmployer变量给覆盖了，导致你要添加的新对象根本没被正确引用到。

2. 数组拼接方式错误 #

你用prevState.employers + newEmployer来尝试添加元素，这在JavaScript里会把数组和对象都转换成字符串进行拼接，最终得到的是一个字符串而非新数组（比如[1,2] + {name: 'test'}会变成"1,2[object Object]"），完全不符合你的预期。而且React要求状态更新必须是不可变操作，不能直接修改原数组，必须返回新的数组引用。

3. 异步更新导致即时console.log看不到结果 #

setState是异步批量执行的，你在setState之后立刻打印this.state.employers，此时状态还没完成更新，所以看到的还是旧值。

修复后的代码 #

handleCommentSubmit = (newEmployer) => {
  console.log('handleCommentSubmit BEFORE', this.state.employers, newEmployer);
  
  // 正确的setState写法
  this.setState((prevState) => ({
    // 用扩展运算符创建新数组，添加新元素
    employers: [...prevState.employers, newEmployer]
  }), () => {
    // 在setState的回调中查看更新后的状态
    console.log('handleCommentSubmit AFTER', this.state.employers);
  });
}

关键说明 #

• 保留正确的回调参数：只保留prevState作为回调参数，避免覆盖外部的newEmployer。
• 不可变更新数组：使用扩展运算符[...prevState.employers, newEmployer]创建新数组，这样既保留了原数组的所有元素，又添加了新元素，同时返回了新的数组引用，符合React的状态更新规则。你也可以用prevState.employers.concat(newEmployer)来达到同样的效果。
• 查看更新后的状态：把打印操作放到setState的第二个回调函数里，这个回调会在状态更新完成、组件重新渲染后执行，能确保拿到最新的状态值。

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