無法將值從輸入傳遞給reactjs中的fromData

我正在使用一個表單react-hook-form，我正在使用 setState 更新輸入表單，但是當我獲取formData并執行 fetch 請求時，輸入文本欄位中的值根本沒有加載。

這是我更新輸入文本欄位setState并執行獲取請求時的圖片

這是我從鍵盤更新輸入文本欄位并執行獲取請求時的圖片

const FirstProject = () => {
  const [solutestate, setSoluteState] = useState("");
  const [solventstate, setSolventState] = useState("");
  const [fetchData, setFetchData] = useState("");
  const [Error, setError] = useState(null);

  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      solute: "",
      solvent: "",
    },
  });

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

    fetch("https://flask-api-test1.herokuapp.com/predict", {
      method: "post",
      body: formData,
    })
      .then((res) => res.json())
      .then((result) => {
        setFetchData(result.result.predictions);
        //console.log(result.result.predictions);
        //console.log(Object.entries(result));
        // setIsPending(false);
      })
      .catch((err) => {
        console.log(data);
        setError(err.error);
        console.log(err);
      });
  };

<form onSubmit={handleSubmit(onSubmit)}>
 <input
  {...register("solute")}
  placeholder="First Name"
  onChange={(e) => setSoluteState(e.target.value)}
  value={solutestate}
 />
 <input
  {...register("solvent")}
  placeholder="First Name"
  onChange={(e) => setSolventState(e.target.value)}
  value={solventstate}
 />
 <input type="submit" />
 </form>

uj5u.com熱心網友回復：

所以，你有幾個問題我可以在code.The狀態目前看是為同onchange event兩個一solvent和solute那為什么他們使用相同的狀態保持。您需要使用您創建的另一個鉤子。您遇到的第二個問題是您發送的是變數 FormData 而不是資料（提供給函式的引數）。表單資料一直是一個空變數。這是正確的版本。

修正如下：https : //codesandbox.io/s/quirky-tdd-0zs4c?file=/ src/ App.js

//per the documents handle submit also gives you the Event Object*

handleSubmit: 
((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function

所以你的代碼應該是從state/event物件中獲取輸入資料on change，當用戶提交時，觸發邏輯來驗證和發送。

import Editortwo from "./components/Editortwo";
import "./styles.css";
import { useState } from "react";
import { useForm } from "react-hook-form";

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

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

  const { register, handleSubmit } = useForm({
    defaultValues: {
      solute: "",
      solvent: ""
    }
  });

  const onSubmit = async data => {
    let res;
    console.log(" Post Data To send to API", data);
    try {
      res = await fetch("https://flask-api-test1.herokuapp.com/predict", {
        method: "post",
        //this was formData which was blank
        body: JSON.stringify(data)
      });
    } catch (err) {
      res = err;
      setError(err);
      console.log(err);
    }

    if (!res) {
      console.warn("Invalid Response", res.status);
      throw Error("No API Response");
    }

    const json = await res.json();
    console.log("Results from Request", json);
    if (json.result) {
      setFetchData(json.result.predictions);
    }
  };
  return (
    <div className="App">
      <Editor {...{ setSoluteState }} />
      <Editortwo {...{ setSolventState }} />
      <form noValidate onSubmit={handleSubmit(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"
          {...register("solute")}
          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"
          {...register("solvent")}
          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>
  );
}

標籤：javascript 反应 形式 拿来 反应钩形

上一篇：Python-無法提取隱藏輸入的值

下一篇：檢查串列中的值是否出現在檔案中