Todo应用中用map方法更新checked状态出现异常，求技术解决方案

你的问题出在**checkTodo函数里错误地用数组索引代替todo的id进行匹配判断**。你创建todo时用Date.now()生成了唯一id，但切换勾选状态时，却拿index === todoId做匹配——数组索引会随元素位置变化，而todo的id是固定值，这就导致每次勾选时你修改的是对应索引位置的元素，而非目标id的todo，最终出现状态混乱。

修复后的代码 #

将checkTodo函数的判断逻辑改成用todo的id匹配：

function checkTodo(todoId) {
  todos = todos.map((todo) => ({
    ...todo,
    checked: todo.id === todoId ? !todo.checked : todo.checked,
  }));
  renderTodos();
}

错误原因拆解 #

比如你添加两个todo，它们的id是1690000000000和1690000001000，但数组索引是0和1。勾选第一个todo时，传入的todoId是它的id，index === todoId永远不成立，所以所有todo的checked都不会变化；后续操作时，数组索引和id偶然巧合匹配才会修改错误的元素，这就是你看到的异常现象。

额外实现建议 #

后续做清除已完成项的逻辑时，直接过滤checked: true的元素即可：

function clearCompleted() {
  todos = todos.filter(todo => !todo.checked);
  renderTodos();
}

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