Reactjs'de girdiden fromdata'ya değer iletilemiyor

Question 1

Bir form kullanıyorum react-hook-form ve Setstate'i kullanarak giriş formlarını güncelliyorum ama ne zaman alıyorum formData ve bir getirme isteği yapın giriş metin alanındaki değer hiç yüklenmiyor.

Giriş metin alanını güncellediğimde bu resim setState ve bir getirme isteği yapın

Giriş metin alanını klavyeden güncellediğimde ve bir getirme isteği yaptığımda bu resim

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

Yani şu anda kodda görebileceğim birkaç sorununuz var.Devlet için de aynıydı. onchange event hem bir solvent ve solute bu yüzden aynı durumu kullanmaya devam ettiler. Oluşturduğunuz diğer kancayı kullanmanız gerekiyordu. Sahip olduğunuz 2. sorun, veri yerine FormData değişkenini gönderiyor olmanızdı (işlev için sağlanan argüman). Form verileri her zaman boş bir değişkendi. İşte doğru versiyon.

Aşağıda düzeltildi: 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

Bu nedenle, kodunuz giriş verilerini şu adresten alıyor olmalıdır: state/event nesne on change ve kullanıcı gönderdiğinde, doğrulamak ve göndermek için mantığı tetikleyin.

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

Yani şu anda kodda görebileceğim birkaç sorununuz var.Devlet için de aynıydı. onchange event hem bir solvent ve solute bu yüzden aynı durumu kullanmaya devam ettiler. Oluşturduğunuz diğer kancayı kullanmanız gerekiyordu. Sahip olduğunuz 2. sorun, veri yerine FormData değişkenini gönderiyor olmanızdı (işlev için sağlanan argüman). Form verileri her zaman boş bir değişkendi. İşte doğru versiyon.

Aşağıda düzeltildi: 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

Bu nedenle, kodunuz giriş verilerini şu adresten alıyor olmalıdır: state/event nesne on change ve kullanıcı gönderdiğinde, doğrulamak ve göndermek için mantığı tetikleyin.

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

Şimdi bu hatayı alıyorum 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
'E' tanımlanmamış hata alıyorum onSubmit ayrıca @Josh
gönder işleyicisindeki Olayı kaldırın. belgelere göre otomatik olarak sağlar. Gönderdiğinizde o sayfanın yenilenmesini ve verilerin kaybolmasını nasıl önleyeceğinizi göstermeye çalışıyordum. Ayrıca, bu kodu codesandbox'ta varsa, tekrarlayın ve paylaşın.
Hatalar çözüldü, ancak kod daha önce olduğu gibi çalışıyor. giriş alanları durum kullanılarak her güncellendiğinde. verileri gönder tuşuna bastığım zaman boş bir dizi değil, ancak girdi yazın ya da kopyala yapıştır çalışma gayet iyi alanları.
giriş alanlarındaki durum değişikliği değeri görüntülenir. ancak bir fetch post isteği yaptığımda verilere yansıtılmıyor
@bunu giyersen sert olur repl.it ya da codesandbox'a Senin için bakmaktan mutluluk duyarım. Getirme isteği üzerine şunları yapmanız gerekir: state verileri doğrulayın ve doğrulayın / kontrol edin, ardından API'ye gönderin. eğer yapmak istediğin buysa. Göndermeyi yaptığınızda, değerleriniz kayboluyorsa varsayılanı engellemeniz gerekir.
codesandbox.io/s/hidden-pond-ojqk0?file=/src/App.js Bu codesandbox bağlantısıdır. Durum iki editörden güncellenir. bir molekül çizin ve moleküler formül giriş metin alanına yansıtılır, gönder düğmesine bastığınızda kayan bir nokta elde edersiniz.
Sorun şu ki, durum giriş metin kutusuna yansıtılıyor, ancak isteği getirdiğimde verilerdeki veriler değil. ama aynı şeyi metin kutusuna kopyalayıp yapıştırdığımda çalışıyor

Reactjs'de girdiden fromdata'ya değer iletilemiyor

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride