React中使用forEach修改数组未更新？控制台显示异常原因解析

React组件初始state：

{
  tasks : [
    {name : "Task A", checked : false},
    {name : "Task B", checked : false}
  ]
}

组件内定义的changeChecked方法如下：

changeChecked (task){
    this.setState(prevState => {
      let copy = [...prevState.tasks];
      copy.forEach((item, index) => {
        if (item == task) {
          copy[index].checked = !copy[index].checked;
        }
        console.log(item);    
        // {name: "Task A", checked : true}
        // {name: "Task B", checked : false}
      });
      console.log(copy);
      // [
      //      {name : "Task A", checked : false},
      //      {name : "Task B", checked : false}
      // ]
      return {tasks : copy}
    });
 }

点击按钮调用该方法并传入state.tasks中的第一个任务时，出现两个异常：

• forEach循环内打印的item显示已修改，但循环后打印的copy数组未体现修改；相同逻辑在交互式JS解释器中执行正常。
• 控制台打印的对象，未展开时显示checked: true，展开后却变成false。

1. 数组打印未更新的核心原因 #

你用[...prevState.tasks]复制数组属于浅拷贝：新数组是独立的，但数组内的每个task对象仍和原state中的对象引用相同。

直接修改copy[index].checked时，其实是在修改原state中的对象（因为引用一致）。而React的setState是异步更新机制，控制台打印copy时，原state对象可能还未完成更新，再加上浅拷贝违反了React的状态不可变原则，最终导致打印结果不符合预期。

2. 控制台展开显示不一致的原因 #

浏览器控制台打印对象时，并不会立即保存对象的完整快照，而是只保存对象的引用。当你点击展开对象时，控制台才会读取对象的当前值。

你修改checked后立刻打印item，此时对象的checked是true，但后续由于浅拷贝导致的原state对象被意外修改，或者React异步更新的时序问题，对象的checked又变回了false，所以展开时看到的是最新值，未展开时显示的是打印瞬间的快照。

符合React规范的正确实现 #

必须遵循状态不可变原则，修改对象时创建新的对象实例，避免直接修改原引用：

changeChecked(task) {
    this.setState(prevState => {
        const updatedTasks = prevState.tasks.map(item => {
            // 匹配到目标任务时，返回新对象并修改checked值
            if (item === task) {
                return { ...item, checked: !item.checked };
            }
            // 其他任务直接返回原对象
            return item;
        });
        console.log(updatedTasks);
        return { tasks: updatedTasks };
    });
}

这个实现用map遍历数组，通过扩展运算符{...item}创建新对象，既保证了原state不被修改，又能正确更新目标任务的状态，控制台打印也会显示正确的结果。

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