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

标签： javascriptreactjsformsreact-hooksfetch-api

Answer 1

由于API是异步的（您的链在fetchthen执行后不会立即执行fetch，它会等到fetch解决）您应该setState({query:""})在最后一个thenPromise 链中添加。

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

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