点击Done按钮或复选框报错，任务编辑提交功能异常求助

核心错误原因 #

1. map函数未返回元素：handleDone和toggleComplete函数中，map仅在匹配到目标任务时修改对象，但没有返回任何值（默认返回undefined），导致生成的新数组全是undefined，React渲染时无法识别，触发报错。
2. 直接修改原状态对象：直接修改task.name或task.completed违反了React状态不可变的原则，会导致状态更新检测失效，同时引发渲染异常。

修正后的函数代码 #

1. 修复handleDone函数

const handleDone = (id) => {
  const updTDL = todolist.map((task) => {
    if (task.id === id) {
      // 创建新对象，修改name属性，保留其他原有属性
      return { ...task, name: EditingText };
    }
    // 未匹配的任务直接返回原对象
    return task;
  });
  setTodoList(updTDL);
  setEditId(null);
  setEditingText("");
}

2. 修复toggleComplete函数

const toggleComplete = (id) => {
  const newTDL = todolist.map((task) => {
    if (task.id === id) {
      // 创建新对象，翻转completed属性
      return { ...task, completed: !task.completed };
    }
    return task;
  });
  setTodoList(newTDL);
}

额外优化建议 #

复选框使用onChange事件替代onClick，同时绑定checked属性确保UI与状态同步：

<input 
  type="checkbox" 
  name="Completed" 
  checked={task.completed}
  onChange={() => toggleComplete(task.id)}
/>

关键说明 #

• map函数必须为每个元素返回值，才能保证新数组结构正确，避免渲染错误。
• 使用扩展运算符{...task}创建新对象，确保不修改原状态对象，让React能正确检测到状态更新。

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