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

【问题标题】：Unable to clear the input field after submitting the form in React在 React 中提交表单后无法清除输入字段
【发布时间】：2020-09-11 17:36:28
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs forms react-hooks fetch-api

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以做两件事。然后，您可以将那里的代码更改为

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

query 必须在收到如下回复后清除：

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

【讨论】：

【解决方案5】：

setState(prevValue => {

            prevValue.query = "";

            prevValue.results= data.Search;   

            return {...prevValue};

});

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

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

【讨论】：

这是一个轻微的变化。在进行 API 调用后的句柄提交函数中，添加了以下代码 setState(prevValue => { return{ ...prevValue, query: "" } }) 现在可以工作了。谢谢