在 React 中提交表单后无法清除输入字段

Question

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 调用失败。如何实现这一点。谢谢

Answer 1

由于fetchAPI是异步的(您的then链在执行后不会立即执行fetch并且会等到fetch得到解决(，您应该在最后一个then承诺链中添加setState({query:""})。

所以你的代码应该是这样的：

.then(data => setState(prevValue => {
return {
...prevValue,
query: "",
results: data.Search
}
}))

Answer 2

你可以做两件事。 在第二个中，您可以将代码更改为

.then(data => setState(prevValue => {
return {
...prevValue,
results: data.Search
query: ''
}
}))

如果不想根据 previousState 值计算任何内容，则可以省略...prevValue

或者，您可以通过调用e.target.reset()但在成功时重置表单，因为您将输入用作受控组件。选择第一种选择

Answer 3

我没有经常使用钩子，但我相信如果你用query: ''替换...prevValue. 那应该行吗？

Answer 4

收到如下响应后，必须清除query：

{
...prevValue,
results: data.Search,
query: ""
}

Answer 5

setState(prevValue => {

prevValue.query = "";
prevValue.results= data.Search;   
return {...prevValue};

}(;

}

注意：当你更新任何状态时，你可以修改prevState变量，只要记住将其作为新的深度克隆值返回，以提高性能和正确做法。

注意：更新状态是一个异步操作。