React.js中onClick函数效果仅在刷新应用后显示的问题求助

数据老陈

2026-6-24

React待办列表删除/完成按钮界面不实时更新的修复方案

核心问题分析

完成任务时，仅从待办列表移除任务，但未将该任务同步添加到已完成任务列表，导致切换到已完成标签页看不到变化
删除已完成任务时，仅更新待办列表状态，未同步更新已完成任务列表，界面无法实时刷新
状态更新逻辑不完整，React无法触发对应组件的重渲染

具体修复代码

1. 修复`completeTask`函数

在移除待办任务的同时，将任务添加到已完成列表：

async function completeTask(e, todo) {
  const resp = await axios.put(`/todos/${todo.taskID}`);
  if (resp.data.success) {
    // 从待办列表移除当前任务
    setTasks(prevTasks => prevTasks.filter(t => t.taskID !== todo.taskID));
    // 将任务添加到已完成列表
    setCompletedTasks(prevCompleted => [...prevCompleted, todo]);
  }
}

2. 修复`deleteTask`函数

同时更新待办和已完成两个列表的状态：

async function deleteTask(e, todo) {
  const resp = await axios.delete(`/todos/${todo.taskID}`);
  if (resp.data.success) {
    // 从待办列表移除
    setTasks(prevTasks => prevTasks.filter(t => t.taskID !== todo.taskID));
    // 从已完成列表移除
    setCompletedTasks(prevCompleted => prevCompleted.filter(t => t.taskID !== todo.taskID));
  }
}

3. 可选：优化初始数据获取

合并两个useEffect请求，减少初始加载时的请求次数：

useEffect(() => {
  Promise.all([
    axios.get("/todos"),
    axios.get("/completedTodos")
  ]).then(([todoResp, completedResp]) => {
    setTasks(todoResp.data);
    setCompletedTasks(completedResp.data);
  });
}, []);