反应搜索 onChange 取消请求

Posted 2023-02-22

【中文标题】反应搜索 onChange 取消请求

【英文标题】：React search onChange cancel request

【发布时间】：2018-06-25 07:26:04

【问题描述】：

我正在使用 Axios 处理搜索功能 onChange。它工作正常。

但问题是当用户将输入删除为空时。请求仍然发送。

我的代码。

    handleSearch = (e) => 
    const query = e.target.value;
    if(this.timeout) clearTimeout(this.timeout);

    this.timeout = setTimeout(() => 
        if (query === '') // do something ????

        requestApi.searchMultiData('search/multi', query)
            .then(response => 
                this.props.data(response.data);
            )
            .catch(error => console.log(error));
    , 300);
    ;

我该如何处理？我的解决方案是文本输入为空时。该请求应被取消。有什么想法吗？谢了。

【问题讨论】：

if (query !== '') requestApi.searchMultiData('search/multi', query) ....

或if (query === '') return（在您的声明之后）

谢谢大家，它的工作。对不起我的简单问题。

其实：handleSearch = (e) => const query = e.target.value; if(this.timeout) clearTimeout(this.timeout); if (query === '') return; this.timeout = setTimeout(() =>

【参考方案1】：

再看一遍，我建议这样做：

handleSearch = (e) =>  
  const query = e.target.value; 
  if (this.timeout) clearTimeout(this.timeout); 
  if (query.trim() === '') return; // here is the logical place to leave
  this.timeout = setTimeout(() => 

【参考方案2】：

您正在寻找early exit from function 的方法。这意味着如果满足条件（query 为空：请参阅如何实现它here），您的回调函数中的部分或大部分代码将不会被执行。

我还建议使用trim() 删除空格；否则，像 这样的值将被认为是正确的，但它们可能不是。