React中无法更新JSON Server数据问题排查求助

核心问题分析 #

1. 表单输入未做受控绑定，无法获取用户修改后的值 #

你当前用defaultValue渲染输入框初始值，但没有将输入框与组件状态绑定，导致提交表单时无法拿到用户最新的输入内容，自然无法正确更新数据。

2. 错误获取表单字段值 #

editTask函数里的event.target.text和event.day是错误写法——event.target是表单元素本身，根本没有text、day这类属性，所以构造出的updateTask里的内容还是旧值，导致JSON Server接收到的是未修改的数据。

3. 冗余的任务查询请求 #

组件已经通过props接收了task数据，没必要再调用fetchTask重新查询一次，既浪费请求，也可能因为网络延迟导致数据不一致。

4. 状态更新未同步到父组件 #

组件内部维护了tasks状态，但如果父组件也有全局的任务列表，这里单独更新自己的状态不会同步到父组件，导致页面显示不一致。而你提到React DevTools能修改数据，说明父组件的状态是正确的，但当前组件的更新逻辑没联动上。

修复后的代码示例 #

import { useState } from "react";

const EditTask = ({ task, onEdit }) => {
  // 用受控组件绑定输入值，初始值来自传入的task
  const [text, setText] = useState(task.text);
  const [day, setDay] = useState(task.day);

  // 编辑任务函数
  const editTask = async (event) => {
    event.preventDefault();
    
    // 直接用当前绑定的state构造更新数据，无需重新请求
    const updateTask = { ...task, text, day };

    const res = await fetch(`http://localhost:5000/tasks/${task.id}`, {
      method: "PUT",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(updateTask)
    });

    if (!res.ok) {
      // 处理请求失败的情况
      console.error("更新任务失败");
      return;
    }

    const updatedTask = await res.json();
    
    // 调用父组件的回调，通知父组件更新全局任务列表
    if (onEdit) {
      onEdit(updatedTask);
    }
  };

  return (
    <form className="add-form" onSubmit={editTask}>
      <div className="form-control">
        <label>Task</label>
        <input
          type="text"
          placeholder="Add Task"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      </div>
      <div className="form-control">
        <label>Day & Time</label>
        <input
          type="text"
          placeholder="Add Day & Time"
          value={day}
          onChange={(e) => setDay(e.target.value)}
        />
      </div>

      <input type="submit" value="Edit Task" className="btn btn-block" />
    </form>
  );
};

export default EditTask;

关键修改说明 #

• 将输入框改为受控组件，通过value和onChange绑定组件内部状态，实时获取用户输入。
• 移除冗余的fetchTask请求和组件内部的tasks状态，直接使用传入的task构造更新数据。
• 调用父组件的onEdit回调，将更新后的任务数据传递给父组件，让父组件负责更新全局任务列表，保证页面数据一致性。
• 增加了请求失败的基础处理，方便排查网络或服务器错误。

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