React Todo组件任务编辑后无法实时更新，需刷新才显示问题排查

核心问题 #

当前handleUpdate仅完成了服务器数据更新，但父组件维护的任务列表状态没有同步更新，导致TodoCard接收的title props仍为旧值，必须刷新页面重新拉取数据才会显示新内容。

具体修复方案 #

方案1：父组件同步更新任务列表（推荐） #

让父组件负责维护全局任务数组状态，TodoCard完成更新后通知父组件修改对应任务的数据：

1. 父组件中定义更新任务的函数：

const updateTodoInList = (todoId, updatedData) => {
  setTodos(prevTodos => 
    prevTodos.map(todo => 
      todo.id === todoId ? { ...todo, ...updatedData } : todo
    )
  );
};

2. 将该函数作为props传递给TodoCard：

<TodoCard todo={todo} updateTodo={updateTodoInList} />

3. 在TodoCard的handleUpdate中调用该函数同步本地状态：

const handleUpdate = async () => {
  try {
    const response = await fetch(`/api/todos/${todo.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: Inputs.title })
    });
    const updatedTodo = await response.json();
    // 通知父组件更新任务列表
    updateTodo(todo.id, { title: updatedTodo.title });
    setIsEditing(false);
  } catch (err) {
    console.error('更新失败:', err);
  }
};

方案2：子组件临时本地更新（应急方案） #

若暂时不想修改父组件，可在handleUpdate成功后直接更新本地状态，但这种方式存在局限性（父组件重新渲染时旧数据会覆盖新内容）：

const handleUpdate = async () => {
  try {
    const response = await fetch(`/api/todos/${todo.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: Inputs.title })
    });
    const updatedTodo = await response.json();
    // 直接更新本地输入值（仅当查看模式渲染Inputs.title时生效）
    setInputs({ ...Inputs, title: updatedTodo.title });
    setIsEditing(false);
  } catch (err) {
    console.error('更新失败:', err);
  }
};

额外检查项 #

确认TodoCard查看模式的渲染逻辑：

• 若查看模式直接显示props.todo.title，必须通过方案1同步父组件状态才能实时生效；
• 若查看模式显示本地Inputs.title，需确保useEffect在props变化时同步输入值：

useEffect(() => {
  setInputs({ title: todo.title });
}, [todo.title]);

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