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

Posted 2023-02-18

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

【英文标题】：Problem using forms and do fetch request in reactjs

【发布时间】：2022-01-01 16:25:49

【问题描述】：

我有一个使用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

【参考方案1】：

你有一些问题。

您并未阻止默认表单操作的发生，因此它可能会重新加载页面。 您没有正确访问表单数据，应该从状态中检索它，而不是从表单的 onSubmit 事件对象中检索。 您正在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>