当您通过提交表单调用API请求时,如何设置Axios响应?我想从/在POST方法中发送表单,并获得API响应,然后用API响应重定向到/result页面。我的代码在下面,它引发
警告:无法对卸载的组件执行React状态更新。
这是一个no-op,但它表示应用程序中存在内存泄漏。
若要修复,请取消useEffect清理函数中的所有订阅和异步任务。在家(在app.js:21)
完成handleSubmit后,Submited存储true,但res仍然初始化为{},而不存储API响应。甚至console.log(response)也显示API的正确响应。我想做一个文本分类器WEB服务。我可能不得不使用warning所说的useEffect,但我不确定。并且不知道如何将其与表单提交一起使用。谢谢.
function App() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/result">
<Result />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
function Home() {
const useInput = initialValue => {
const [value, setValue] = useState(initialValue)
return {
value,
setValue,
reset: () => setValue(''),
bind: {
value,
onChange: event => {setValue(event.target.value)}
}
}
}
const [submitted, setSubmitted] = useState(false);
const {value: url, bind: bindUrl, reset: resetUrl} = useInput('')
const {value: content, bind: bindContent, reset: resetContent} = useInput('')
const [res, setRes] = useState({})
const handleSubmit = (event) => {
event.preventDefault()
axios.post('http://127.0.0.1:5000/predict', {url:url, content:content}) // My API
.then(response => {
setSubmitted(true)
console.log(response)
setRes(response) // This doesn't work
})
}
if (submitted) {
return <Redirect push to={{
pathname: '/result',
state: {response: res}
}}
/>
}
return (
<div>
<h1>Send URL and Content</h1>
<form onSubmit={handleSubmit}>
<label>
URL:
<input name="url" type="text" {...bindUrl} />
</label>
<br />
<label>
content:
<input name="content" type="text" {...bindContent} />
</label>
<br />
<input type="submit" value="Submit" />
</form>
</div>
);
}
您可以将此代码段添加到代码中
useEffect(() => {
if(Object.values(response).length) { // Here place an valid check to know if valid response is present
setSubmitted(submitted => !submitted)
}
}, [response])
并将API调用方法更改为
const handleSubmit = (event) => {
event.preventDefault()
axios.post('http://127.0.0.1:5000/predict', {url:url, content:content}) // My API
.then(response => {
setRes(response)
})
}