React待办应用开发中setState无法正确更新数组状态问题咨询

你遇到的勾选后视图不同步问题，本质是违反了React状态更新的不可变性规则，问题就出在你写的.map()遍历逻辑里：

• 遍历匹配到对应id的待办项时，你直接对原数组中的todo对象执行todo.completed = !todo.completed的直接赋值
• 这种操作本质是篡改了原state存储的嵌套对象，.map()生成的新数组里，所有待办项的引用和原state中的待办项引用完全一致
• React判断状态是否需要触发重渲染时，依赖浅对比引用变化完成检测，引用没有发生变化时，React会判定状态无更新，自然不会把变更同步到组件视图上
• 你观察到的“待办项属性被修改”，其实是直接篡改原state对象的副作用，不是通过规范的setState流程完成的状态更新。

修改.map()的处理逻辑：对需要变更completed属性的待办项，生成全新的对象实例，不要直接修改原对象：

handleChange(id) {
  this.setState( prevState => {
    const updatedTodos = prevState.todoItems.map( todo => {
      if (todo.id === id) {
        // 拷贝原todo的所有属性，覆盖需要更新的completed值，生成全新对象
        return { ...todo, completed: !todo.completed }
      }
      // 不需要变更的待办项直接返回原引用，避免不必要的性能损耗
      return todo
    })
    return {
      todoItems: updatedTodos
    }
  })
}

• 排查这类state不更新的问题时，可以在setState返回值前，打印对比prevState.todoItems[index]和updatedTodos[index]的引用地址，如果两者完全相等，就说明你没有生成新的引用，React自然无法感知到更新
• 所有嵌套在state中的数组、对象，更新时都不能直接修改原属性，必须返回全新的引用：数组整体要生成新实例，需要变更的嵌套对象要生成新实例
• 直接修改原state嵌套属性的写法，在React开发模式下会触发不可变性检测的控制台警告，属于严格禁止的反模式。

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