无法将值从输入传递到reactjs中的fromData
Unable to pass value from input to fromData in reactjs
我有一个使用 react-hook-form
的表单,我正在使用 setState 更新输入表单,但是当我获取 formData
并执行提取请求时,输入文本字段中的值未加载完全没有。
这是我从 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>
所以你有几个问题,我目前可以看到 code.The 状态对于 solvent
和 solute
onchange event
是相同的,这就是为什么他们一直使用相同的状态。您需要使用您创建的另一个挂钩。您遇到的第二个问题是您发送的是变量 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>
);
}
我有一个使用 react-hook-form
的表单,我正在使用 setState 更新输入表单,但是当我获取 formData
并执行提取请求时,输入文本字段中的值未加载完全没有。
这是我从 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>
所以你有几个问题,我目前可以看到 code.The 状态对于 solvent
和 solute
onchange event
是相同的,这就是为什么他们一直使用相同的状态。您需要使用您创建的另一个挂钩。您遇到的第二个问题是您发送的是变量 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>
);
}