ReactJS中使用单选按钮发起PATCH请求失败问题排查

你的代码里存在几个核心问题，导致数据更新无响应，逐个拆解说明：

1. PATCH请求未携带更新的状态值 #

你在handleUpdate中直接发送原始的project对象，但这个对象里并没有包含用户通过单选按钮选择的WaxProcedure值。后端接收不到需要更新的字段，自然不会修改数据。

2. 表单提交未阻止默认行为 #

表单的onSubmit事件默认会触发页面刷新，这会导致PATCH请求还未完成，页面就重新加载，请求可能被中断；即使后端处理成功，页面也会重新拉取旧数据，看起来像是没更新。

3. 重复触发更新操作 #

提交按钮同时绑定了onClick和表单的onSubmit，点击按钮会触发两次handleUpdate，属于冗余操作，还可能引发请求冲突。

4. 本地数据未同步更新 #

就算后端更新成功，页面上的project数据还是旧的，用户看不到状态变化，会误以为更新失败。

修复后的代码示例 #

function ProjectDetails() {
  const [WaxProcedure, setWaxProcedure] = useState("");
  const { id } = useParams();
  const {
    data: project,
    error,
    isPending,
    refetch // 假设useFetch自定义hook提供刷新数据的方法
  } = useFetch(`http://localhost:8000/ProjectsData/${id}`);
  const history = useNavigate();

  const handleClickDelete = () => {
    fetch(`http://localhost:8000/ProjectsData/${id}`, {
      method: "DELETE",
    }).then(() => {
      history("/");
    });
  };

  const handleUpdate = (e) => {
    e.preventDefault(); // 阻止表单默认刷新行为
    
    // 仅发送需要更新的字段，而非整个project对象
    fetch(`http://localhost:8000/ProjectsData/${id}`, {
      method: "PATCH",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ WaxProcedure }),
    }).then((response) => {
      if (response.ok) {
        refetch(); // 请求成功后刷新本地数据，同步页面显示
      }
    }).catch(err => {
      console.error("更新失败:", err);
    });
  };

  // 当project加载完成后，同步WaxProcedure的初始状态
  useEffect(() => {
    if (project) {
      setWaxProcedure(project.WaxProcedure || "Not Complete");
    }
  }, [project]);

  return (
    <div className="project-details">
      {isPending && <div>Loading...</div>}
      {error && <div>{error}</div>}
      {project && (
        <article>
          <h1>{project.Customer}</h1>
          <h2>
            {project.Part} {project.Description}
          </h2>
          <h2>{project.Tool}</h2>
          <div>Project Status: {project.Stage}</div>
          <p>Lead engineer: {project.Engineer}</p>
          <div className="procedure-list">
            <form onSubmit={handleUpdate}>
              Wax: <p>{WaxProcedure}</p>
              <input
                type="radio"
                name="waxprocedure"
                value="Not Complete"
                checked={WaxProcedure === "Not Complete"}
                onChange={(e) => setWaxProcedure(e.target.value)}
              />
              Not Complete
              <input
                type="radio"
                name="waxprocedure"
                value="Complete"
                checked={WaxProcedure === "Complete"}
                onChange={(e) => setWaxProcedure(e.target.value)}
              />
              Complete
              <button type="submit">Update</button>
            </form>
          </div>
          <button onClick={handleClickDelete}>Delete</button>
        </article>
      )}
    </div>
  );
}

关键修改点说明 #

• 传递正确的更新字段：PATCH请求仅发送{ WaxProcedure }，符合RESTful规范，避免覆盖无关字段。
• 阻止页面刷新：在handleUpdate中调用e.preventDefault()，确保请求正常完成。
• 同步初始状态：用useEffect在project加载完成后，将WaxProcedure初始值与后端数据同步，单选按钮默认选中正确状态。
• 移除重复触发：删除按钮的onClick绑定，仅通过表单onSubmit触发更新。
• 刷新本地数据：请求成功后调用refetch，让页面显示最新的后端数据。

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