在 reactjs 中使用表单并获取请求时出现问题

Question

我有一个使用react-hook-forms 的代码。现在我正在删除它们并使用本地状态，所以在这样做时我遇到了错误。附上参考代码和代码沙箱供参考。

问题是状态反映在输入文本框中，但当我获取请求时它不在数据中。但是当我只是在文本框中复制粘贴相同的内容时它正在工作

import Editor from "./components/Editor";
import Editortwo from "./components/Editortwo";
import "./styles.css";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { default as FormData } from "form-data";

export default function App() {
  const [solutestate, setSoluteState] = useState();
  const [solventstate, setSolventState] = useState();

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

  // states to keep track of check box
  console.log(solutestate);

  // const data1 = { solute: solutestate, solvent: solutestate };
  // console.log(data1);

  const formData = new FormData();
  const onSubmit = (data) => {
    formData.set("solute", data.solute);
    formData.set("solvent", data.solvent);
    console.log(data);

    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) => setSoluteState(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>
  );
}

代码沙盒link

Answer 1

你有一些问题。

1. 您并未阻止默认表单操作的发生，因此它可能会重新加载页面。
2. 您没有正确访问表单数据，应该从状态中检索它，而不是从表单的 onSubmit 事件对象中检索。
3. 您正在solventstate 状态输入上使用setSoluteState 状态更新器功能。

代码：

const onSubmit = (e) => {
  e.preventDefault(); // <-- prevent the default form action
  
  const formData = new FormData();
  formData.set("solute", solutestate);   // <-- local component state
  formData.set("solvent", solventstate); // <-- local component state
  console.log({ solutestate, 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);
    });
};

...

<form noValidate onSubmit={onSubmit} className="space-x-4">
  <input
    ...
    placeholder="SOLUTE"
    onChange={(e) => setSoluteState(e.target.value)}
    value={solutestate}
  />
  <input
    ...
    placeholder="SOLVENT"
    onChange={(e) => setSolventState(e.target.value)} // <-- use correct state updater
    value={solventstate}
  />
  ...
</form>