React Todo List删除功能异常：仅能删除单个待办项求助

你的代码问题出在删除逻辑和事件绑定上：

• 删除函数没有获取到当前要删除的待办项ID，过滤条件写得不对
• filter((item) => item.id)只会保留所有ID为真值的项，第一次删除只是巧合，后续无法精准匹配要删除的项

直接按下面的方式修改代码就能解决：

const handleDelete = (todoId) => {
  setTodos(todos => todos.filter((item) => item.id !== todoId));
}

return (
  <>
    <h2>Your Todos</h2>
    <NewTodo onAdd={(newTodo) => setTodos([...todos, newTodo])} />
    <ul>
      {visibleTodos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => handleDelete(todo.id)}><AiFillDelete /></button>
        </li>    
      ))}
    </ul>
  </>
);

修改说明： #

1. 把删除函数改名为handleDelete（更符合React命名习惯），并接收todoId参数，明确要删除的目标ID
2. 在按钮的onClick里用箭头函数传递当前待办项的id，这样每次点击都能精准定位要删除的项
3. 过滤条件改为item.id !== todoId，确保只移除目标待办项，其他项正常保留

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