React Todo List应用删除功能实现问题求助：如何通过ID删除任务

问题分析 #

你的删除功能存在两个核心问题：

• 过滤逻辑错误：当前checkFunction仅对比数组最后一个任务的id，无论点击哪个删除按钮，都只会针对最后一个任务做判断，完全不符合按ID删除的需求。
• 未更新状态：调用tasks.filter()后没有通过setTasks将过滤后的新数组同步到状态中，React无法感知数组变化，页面也就不会重新渲染。

正确实现方法 #

filter方法的核心是遍历数组的每一个元素，通过回调函数判断是否保留该元素。回调函数会接收当前遍历到的任务作为参数，我们只需要判断这个任务的id是否不等于要删除的id即可。

修正后的handleDelete函数：

const handleDelete = (id) => {
  // 过滤出所有id不等于要删除id的任务
  const filteredTasks = tasks.filter(task => task.id !== id);
  // 更新状态，触发页面重新渲染
  setTasks(filteredTasks);
}

额外优化建议 #

可以在handleAdd函数中添加输入校验与清空逻辑，避免添加空任务或重复添加同一内容：

const handleAdd = () => {
  // 过滤空输入
  if (!newTask.trim()) return;
  
  const task = {
    id: tasks.length === 0 ? 1 : tasks[tasks.length-1].id + 1,
    name: newTask
  };
  const newArr = [...tasks, task];
  setTasks(newArr);
  // 清空输入框
  setNewTask('');
}

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