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得到已解决）您应该在最后一个setState({query:""})承诺链中添加then 。

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

.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

我不太经常使用钩子，但是我相信如果您将...prevValue替换为query: ''。应该可以吗？

Answer 4

setState（prevValue => {

            prevValue.query = "";

            prevValue.results= data.Search;   

            return {...prevValue};

}）;

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

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

Answer 5

收到如下所示的响应后，必须清除

query：

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

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

5 个答案: