React项目中无法删除数组内任务的问题求助

核心问题与修复步骤： #

1. App组件的deleteTask函数未正确更新状态

当前的deleteTask只是对原始数组执行了filter操作，既没使用状态中的tasks，也没调用setTasks更新组件状态，而且filter的条件还写反了——现在是保留与目标id匹配的任务，实际应该过滤掉匹配id的任务。

修复后的deleteTask代码：

const deleteTask = (id: string) => {
  // 过滤掉目标id对应的任务，生成新数组
  const updatedTasks = tasks.filter(task => task.id !== id);
  // 更新state触发组件重新渲染
  setTasks(updatedTasks);
};

2. 子组件的类型定义与调用逻辑不匹配

TaskComponent的Props中，deleteTask被定义为接收整个Tasks对象，但App组件的deleteTask实际需要的是id参数；同时调用时传递{...task, id}属于冗余操作，直接传拿到的id即可。

修复子组件代码：

// 修正Props类型定义
type Props = {
  Tasks: Tasks[];
  changeTask: (tasks: Tasks) => void;
  deleteTask: (id: string) => void; // 改为接收string类型的id
};

// 修正删除触发逻辑
const handleDeleteTask = () => {
  if (id) {
    deleteTask(id);
  }
  history.push("/taskslist");
};

额外注意事项

• 确保useParams对应的IdParams类型正确，保证id为字符串类型，避免类型不匹配问题
• App组件中未定义的changeTask函数，若未使用可直接删除该props

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