React Todo应用handleChange功能异常，求排查代码缺失问题

嘿，我一眼就发现问题所在啦！你的复选框功能异常，核心原因是直接修改了state中的原对象，导致React无法检测到状态变化，所以组件不会重新渲染来更新复选框状态。

具体问题点： #

在handleChange方法里，你直接修改了todo.completed的值：

if (todo.id === id) {
  todo.completed = !todo.completed; // 直接修改原state对象，React检测不到变化
}
return todo;

React的状态更新依赖于引用变化——当你修改原对象的属性时，这个对象的引用并没有改变，map返回的数组里的元素还是原来的引用。React做浅比较时会认为todos数组没有变化，因此不会触发组件重新渲染。

修复方案： #

修改handleChange方法，当需要更新todo时，返回一个新的对象而不是修改原对象：

handleChange(id) {
  this.setState(prevState => {
    const updatedTodos = prevState.todos.map(todo => {
      if (todo.id === id) {
        // 用扩展运算符创建新对象，复制原属性并修改completed字段
        return { ...todo, completed: !todo.completed };
      }
      return todo; // 未修改的todo直接返回原对象即可
    });
    return { todos : updatedTodos };
  });
}

这样一来，被修改的todo变成了新的对象，数组的引用也因为map生成了新数组而改变，React就能正确检测到状态变化，重新渲染组件，复选框的勾选状态就会正常切换了。

额外注意点： #

你的代码里还有一个语法错误：同一个文件里出现了两个export default（App和TodoItem各一个）。在ES6模块中，一个文件只能有一个默认导出。你可以把TodoItem改成命名导出：

// 把TodoItem的导出改为命名导出
export function TodoItem(props) {
  // ...组件内容
}

然后在使用的地方用import { TodoItem } from './xxx'引入，或者更推荐的做法是把两个组件分开到不同的文件里，符合React项目的规范写法。

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