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

Posted 2023-02-27

【中文标题】在 React 中提交表单后无法清除输入字段

【英文标题】：Unable to clear the input field after submitting the form in 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>
    )

提交表单后，如果我设置状态，如 setStatequery:"" ，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: "" ) 现在可以工作了。谢谢