React Todo应用复选框checked状态不更新问题求助

1. 检查Todo项的completed初始值 #

添加新Todo时，必须给每个todo对象显式设置completed: false的初始值。如果添加逻辑里遗漏这个字段，初始状态下completed为undefined，后续切换时即便赋值true/false，也可能导致React状态对比异常，无法触发视图更新。

正确的添加逻辑示例：

function addTodo() {
  if (newItem.trim()) {
    setToDos(prev => [...prev, {
      id: Date.now(),
      title: newItem,
      completed: false // 必须显式设置初始值
    }]);
    setNewItem("");
  }
}

2. 确认Todo的id是唯一值 #

如果多个Todo项的id重复，React列表渲染时会复用组件，导致状态更新无法正确映射到对应复选框。确保生成id的方式唯一（比如Date.now()、递增计数器或UUID工具）。

3. 验证状态更新的不可变性 #

你的toggleToDo函数逻辑符合React状态不可变要求，但可以添加日志确认更新结果：

function toggleToDo(id, completed) {
  setToDos((currentTodo) => {
    const updatedTodos = currentTodo.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed};
      }
      return todo;
    });
    console.log("更新后的Todos:", updatedTodos); // 检查是否正确修改了completed值
    return updatedTodos;
  });
}

4. 检查复选框的绑定逻辑 #

在onChange事件中添加日志，确认是否拿到正确的checked值：

onChange={(e) => {
  console.log("复选框状态:", e.target.checked);
  toggleToDo(id, e.target.checked);
}}

逐一排查以上几点，即可解决复选框状态不更新的问题。

内容的提问来源于stack exchange，提问作者Felipe Van Der Donckt