function Search() {
let [state, setState] = useState({
query: "",
results: []
})
let handleSubmit = e => {
e.preventDefault();
if(state.query.length>0) {
fetch(searchURL)
.then(response => response.json())
.then(data => setState(prevValue => {
return {
...prevValue,
results: data.Search
}
}))
setState({query:""})
}
}
return (
<div>
<h1>Search</h1>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Search..." onChange={handleChange} value={state.query}/>
<button type="submit">Search</button>
</form>
</div>
)
}
提交表单后，如果我要设置状态（如setState {query：“”}），则API调用将失败。如何做到这一点。谢谢
由于该fetchAPI是异步的（您的then链将在执行后立即执行，fetch并且将等到fetch得到解决之后再执行），因此应setState({query:""})在最后一个thenpromise链中添加。
因此，您的代码应如下所示：
.then(data => setState(prevValue => {
return {
...prevValue,
query: "",
results: data.Search
}
}))
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句