javascript - 在 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

自fetch API是异步的(您的then链不会在fetch执行后立即执行，而是会等到fetch得到解析)您应该在最后一个 then promise 链中添加 setState({query:""}) 。

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

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