使用表单时出现问题并在 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>
  );
}

codesandbox link

Answer 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>

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

Problem using forms and do fetch request in reactjs

javascript

reactjs

forms

react-hooks

react-forms