Nepodarilo odovzdať hodnotu od vstupu do fromData v reactjs

Question 1

Ja som s pomocou formulára react-hook-form a ja som aktualizácia vstupné formuláre pomocou setState, ale keď som si formData a to fetch žiadosť hodnota zo vstupného textového poľa nie je zaťaženie na všetkých.

To je ten obraz, keď som aktualizácia vstupné textové pole z setState a to fetch vyžiadanie

To je ten obraz, keď som aktualizácia vstupné textové pole z klávesnice, a to fetch vyžiadanie

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>

Question 2

Tak máte pár otázkach som sa môžete v súčasnosti vidieť v kóde.Stav bol rovnaký pre onchange event pre oboch solvent a solute že prečo sú vedené pomocou istého štátu. Čo ste potrebovali použiť druhý háčik, ktoré ste vytvorili. 2. otázka, ktorú mal, bolo, že ste boli poslaní premennej FormData namiesto údajov (argument poskytované funkcie). Formulár údajov bol prázdny premennej celý čas. Je tu správnu verziu.

Pevné nižšie: 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

Takže váš kód by mal byť gettin g vstupných údajov z state/event objekt on changea keď používateľ podá, spustí logiku potvrdiť a odoslať.

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>
  );
}

Josh · Answer 1 · 2021-11-23T20:17:07

Tak máte pár otázkach som sa môžete v súčasnosti vidieť v kóde.Stav bol rovnaký pre onchange event pre oboch solvent a solute že prečo sú vedené pomocou istého štátu. Čo ste potrebovali použiť druhý háčik, ktoré ste vytvorili. 2. otázka, ktorú mal, bolo, že ste boli poslaní premennej FormData namiesto údajov (argument poskytované funkcie). Formulár údajov bol prázdny premennej celý čas. Je tu správnu verziu.

Pevné nižšie: 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

Takže váš kód by mal byť gettin g vstupných údajov z state/event objekt on changea keď používateľ podá, spustí logiku potvrdiť a odoslať.

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>
  );
}

Som ako túto chybu teraz Line 47:19: 'err' is not defined no-undef Line 48:16: 'err' is not defined no-undef Line 310:60: 'e' is not defined no-undef
Dostávam chybové 'e' nie je definovaný v onSubmit aj @Josh
ach odstrániť Udalosť v odoslať handler. poskytuje to automaticky na dokumenty. Bol som len snaží ukázať, či keď ste odoslali, ako zabrániť tomu, aby sa stránka osviežujúci a straty dát. Tiež, ak máte tento kód v codesandbox, zve a zdieľať ho.
Chyby vyriešiť, ale kód je pracovať ako predtým. vždy, keď vstupné polia sú aktualizované pomocou štátu. keď som kliknite na tlačidlo odoslať údaje je pole prázdne, ale ak som typ alebo skopírovať a vložiť do vstupných polí jeho pracovných úplne v poriadku.
štát zmeniť na vstupných polí hodnota je práve zobrazené. ale nie odráža v údajoch, keď som urobiť fetch post
@drsné ak dáte to na zve.alebo codesandbox bol by som rád, aby sa na to pozerajú na vás. Na načítanie žiadosť musíte vziať state údaje a overili/check odošlite ju k API. ak to je to, čo chcete robiť. Ak to predložiť potrebujete, aby sa zabránilo predvolené, ak vaše hodnoty idú preč.
codesandbox.io/s/hidden-pond-ojqk0?file=/src/App.js Toto je codesandbox prepojenie. Štát je aktualizované z dvoch redaktorov. nakresliť molekuly a molekulový vzorec sa odráža v vstupné textové pole, keď stlačíte tlačidlo odoslať dostanete pohyblivou rádovou čiarkou.
Problém je stav sa odráža v vstupné textové pole, ale to nie je ich údajov, keď som si preberal žiadosti. ale keď som jednoducho kopírovať vložiť isté v textovom poli je práca

Nepodarilo odovzdať hodnotu od vstupu do fromData v reactjs

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii