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

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

Answer 2

setState(prevValue => {

            prevValue.query = "";

            prevValue.results= data.Search;   

            return {...prevValue};

});

注意：当您更新任何状态时，您可以修改 prevState 变量，只需记住 return 它作为性能和正确实践的新深度克隆值。

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

因为fetch API是异步的（你的then链不会在fetch执行后立即执行，它会等到fetch 得到解决）你应该在最后一个 then 承诺链中添加 setState({query:""})。

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

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

React提交表单后无法清空输入框

Unable to clear the input field after submitting the form in React

javascript

forms

reactjs

fetch-api

react-hooks