React移除react-hook-form改用本地state后fetch请求数据丢失问题

你的代码存在4处核心问题导致提交数据为空：

• 溶剂输入框的onChange事件绑定错误：你给溶剂输入框绑定的更新函数还是setSoluteState，导致输入溶剂时实际修改的是溶质的状态，solventstate始终没有被正确赋值
• onSubmit函数仍在使用已废弃的react-hook-form传入的data参数：你已经移除了react-hook-form逻辑，表单提交时不会再自动注入这个data参数，实际你要取的是自己声明的solutestate和solventstate两个状态值
• FormData实例声明位置错误：你把FormData实例写在了组件顶层，每次组件重新渲染都会生成新的空实例，应该放到onSubmit函数内部声明
• 状态初始值为undefined：会导致输入框从非受控组件切换为受控组件的控制台警告，建议初始赋值为空字符串

修正后的完整代码如下：

import Editor from "./components/Editor";
import Editortwo from "./components/Editortwo";
import "./styles.css";
import { useState } from "react";

export default function App() {
  // 初始化状态为空字符串，避免非受控组件警告
  const [solutestate, setSoluteState] = useState("");
  const [solventstate, setSolventState] = useState("");

  const [fetchData, setFetchData] = useState("");
  const [Error, setError] = useState(null);

  const onSubmit = (e) => {
    // 阻止表单默认提交行为
    e.preventDefault();
    const formData = new FormData();
    // 直接使用本地状态赋值
    formData.set("solute", solutestate);
    formData.set("solvent", solventstate);

    fetch("https://flask-api-test1.herokuapp.com/predict", {
      method: "post",
      body: formData
    })
      .then((res) => res.json())
      .then((result) => {
        setFetchData(result.result.predictions);
      })
      .catch((err) => {
        setError(err.error);
        console.log(err);
      });
  };
  return (
    <div className="App">
      <Editor {...{ setSoluteState }} />
      <Editortwo {...{ setSolventState }} />
      <form noValidate onSubmit={onSubmit} className="space-x-4">
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          placeholder="SOLUTE"
          onChange={(e) => setSoluteState(e.target.value)}
          value={solutestate}
        />
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          placeholder="SOLVENT"
          onChange={(e) => setSolventState(e.target.value)}
          value={solventstate}
        />
        <input
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit"
        />
        <input
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="text"
          readOnly
          value={fetchData}
          name="OUTPUT"
        />
      </form>
    </div>
  );
}

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