全栈TodoList应用Todo无法更新 - Redux Toolkit问题排查

核心问题分析 #

结合你提供的代码，更新Todo无响应、返回原始值的问题主要由参数不匹配、字段名不一致和异步状态判断时机错误导致，以下是具体修复方案：

1. Redux异步Thunk参数不匹配 #

在todoSlice.js的updateTodo异步Thunk中，你定义接收{ todoId, todoData }，但前端Todo.js里dispatch时传递的是{ todoId: todo._id, task }，参数名不匹配导致todoData为undefined，无法正确传递给后端接口。

修复代码：
修改todoSlice.js中的updateTodo Thunk：

export const updateTodo = createAsyncThunk(
  "todos/update",
  async ({ todoId, task }, thunkAPI) => { // 将todoData改为task
    try {
      return await todoService.updateTodo(todoId, task);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

2. 前端State字段与后端/Redux存储字段不匹配 #

Todo.js中你定义的task状态对象使用todo作为任务内容的键，但Redux存储和后端模型均使用task字段（如todo.task、后端更新的是task字段），导致传给后端的数据字段错误，后端无法正确更新内容，返回原始值。

修复代码：
修改Todo.js中的State定义：

const [task, setTask] = useState({
  task: "task three test", // 将todo改为task
  completed: todo.completed,
  isEditing: todo.isEditing,
});

如果你的需求是切换completed状态，还需要在点击时更新状态值：

const handleEdit = () => {
  const updatedTask = { ...task, completed: !task.completed };
  setTask(updatedTask);
  dispatch(updateTodo({ todoId: todo._id, task: updatedTask }));
};

同时修改渲染部分的点击事件，无需传递事件对象：

<div className="check-wrapper" onClick={handleEdit}>

3. 删除操作中状态判断时机错误 #

Todo.js的handleClick中，你在dispatchdeleteTodo后立即判断isError和isSuccess，但Redux状态更新是异步的，此时状态尚未改变，无法触发正确的toast提示。

修复代码：
使用useEffect监听状态变化来触发提示：

useEffect(() => {
  if (isError) {
    toast.error(message, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: false,
      draggable: false,
      progress: undefined,
      theme: "colored",
    });
    dispatch(reset()); // 重置状态避免重复触发
  }
  if (isSuccess) {
    toast.success("Todo deleted", {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: false,
      draggable: false,
      progress: undefined,
      theme: "colored",
    });
    dispatch(reset());
  }
}, [isError, isSuccess, message, dispatch]);

简化handleClick函数：

const handleClick = () => {
  dispatch(deleteTodo(todo._id));
};

4. 后端路由注释修正（可选） #

后端代码中路由注释写的是PUT /api/todos，但实际处理的是带ID参数的PUT /api/todos/:id，建议修正注释避免混淆：

// @desc    edit todo / toggle complete / isEditing
// @route   PUT /api/todos/:id // 加上:id参数标识
// @access  Public
const editTodo = asyncHandler(async (req, res) => {
  // ... 原有代码
});

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