Question

我正在使用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);
    };

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

Answer 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(() => {

Answer 2

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

我还建议使用trim()删除空格；否则，之类的值将被认为是正确的，而它们可能是错误的。

反应搜索onChange取消请求

2 个答案: