React.js事件处理函数未返回更新数据导致复选框无法切换勾选状态

问题根因 #

你在 handleChange 方法中直接修改了原state中的todo对象属性，违反了React state的不可变原则：

• Array.map 虽然会生成新数组，但数组内的todo对象还是和原state共用引用
• 直接修改 todo.completed 属于突变原有state，React浅比较时会判定该对象未发生变化，不会触发对应组件的重渲染，因此复选框状态不会更新。

修正方案 #

修改App.js中的handleChange方法，匹配到对应id时返回全新的todo对象，不要修改原对象属性：

handleChange(id){
  this.setState(prevState => {
    const updatedTodos = prevState.todos.map(todo => {
      if(todo.id === id){
        // 用展开运算符生成新对象，保留原有属性，仅修改completed状态
        return {
          ...todo,
          completed: !todo.completed
        }
      }
      return todo
    })
    return {
      todos : updatedTodos
    }
  })
}

内容的提问来源于stack exchange，提问作者red-blood-coding