React+Redux任务编辑异常：点击Save按钮无法同步UI更新

点击Edit按钮能展开输入框编辑任务，但点Save后新内容没保存，还是显示旧任务。Redux开发者工具里能看到payload已经更新，但UI没同步。

代码里存在三处关键不匹配：

• Action里的updateTask用了newName字段，但Reducer里要读取的是newTitle，字段名不对应导致Redux状态未正确更新
• Task组件调用updateTask时传错了参数，onSaveClicked函数里用了title.id，但点击按钮时并未传递title参数，应该直接使用props传入的task.id
• 本地状态inputValue未与Redux中的任务标题同步，即使Redux状态更新，输入框值也不会自动跟着变化

1. 修正Action的payload字段名 #

打开actions文件，把updateTask里的newName改为newTitle，与Reducer中的字段对应：

export const updateTask = (id, title) => ({
  type: UPDATE_TASK,
  payload: { id, newTitle: title }, // 将newName替换为newTitle
});

2. 修正Task组件的onSaveClicked函数 #

移除函数参数，直接使用props中的task.id：

const onSaveClicked = () => {
  dispatch(updateTask(task.id, inputValue));
  setIsEditing(!isEditing);
};

同时确保Save按钮的onClick直接调用该函数，无需传参：

<Button onClick={onSaveClicked} variant="outlined">
  Save
</Button>

3. 同步本地输入状态与Redux（可选优化） #

添加useEffect监听task.title的变化，当Redux中的任务标题更新时，同步更新本地inputValue：

import React, { useState, useEffect } from "react";

const Task = ({ task, onDelete }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [inputValue, setInputValue] = useState(task.title);
  const dispatch = useDispatch();

  // 监听task.title变化，同步输入框值
  useEffect(() => {
    setInputValue(task.title);
  }, [task.title]);

  // 其余代码保持不变
};

修复后测试：点击Edit编辑内容，点击Save后，Redux状态会正确更新，UI也会同步显示新的任务标题。

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