如何在React函数组件中实现点击删除待办列表项的功能

解决方法 #

核心逻辑是在点击列表项时，把当前条目的唯一标识（推荐用id，比数组下标更稳定）传递给删除函数，再用这个标识过滤待办数组即可，分三步修改代码：

1. 修改App.js的deleteItem函数

让函数直接接收待删除条目的id作为参数，替换原有的硬编码逻辑：

// App.js 中修改deleteItem
const deleteItem = (todoId) => {
  const newTodos = todos.filter((item) => item.id !== todoId);
  setTodos(newTodos);
};

2. 修改TodoList.js，给Todo组件传递id属性

你当前的Todo组件没有拿到待办条目的id，需要在渲染时传递：

// TodoList.js 中map渲染Todo时新增id传参
{props.items.map((todo, i) => (
  <Todo
    index={i}
    key={todo.id}
    id={todo.id} // 新增这行，传递todo的唯一id
    title={todo.title}
    date={todo.date}
    handleDelete={props.handleDelete}
  />
))}

3. 修改Todo.js的点击事件，传入当前条目的id

不要直接把handleDelete绑给onClick，用箭头函数包裹一层，把当前条目的id作为参数传递：

// Todo.js 中修改li的onClick属性
<li onClick={() => props.handleDelete(props.id)} className="todo-item">
  {/* 内部内容不变 */}
</li>

补充说明

如果你想继续用下标index来做筛选也可以，只需要把上面传递的id换成index即可，但是要注意：如果后续有新增/删除待办的操作，数组下标会动态变化，可能出现删错条目的问题，优先用每个todo自带的唯一id更稳妥。

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