在React中，有什么方法可以让我仅在有人停止输入时才提交搜索请求? [英] In React, is there a way I can submit my search request only when someone stops typing?

问题描述

我正在使用React 16.13.0.我有这个搜索框，人们可以在其中输入文字，并希望在输入文字时看到结果...

I'm using React 16.13.0. I have this search box where people type and expect to see results as they type ...

return (
  <div className="searchForm">
    <input
      type="text"
      placeholder="Search"
      value={this.state.searchTerm}
      onChange={this.handleChange}
    />

我使用下面的函数来处理检索结果，当人们键入...

I use the below functions to handle retrieving results as people type ...

  handleChange(event) {
    const query = event.target.value;
    if (!query) {
      this.setState({ searchTerm: query, searchResults: [] });
    } else {
      this.setState({ searchTerm: query, loading: true }, () => {
        this.doSearch(query);
      });
    }
  }

  doSearch = (query) => {
    const searchUrl = "/coops/?contains=" + encodeURIComponent(query);
    fetch(searchUrl, {
      method: "GET",
    })
      .then((response) => response.json())
      .then((data) => {
        if (query === this.state.searchTerm) {
          this.setState({
            searchResults: data,
            loading: false,
          });
        }
      });
  };

我正在尝试减少正在进行/处理的网络呼叫的数量.如果有人输入"res"之类的字符串，以相当快的方式，他们可能不在乎"r"的结果.或重新"所以我想知道，如果在搜索框中输入新字母，是否可以通过某种方式取消请求?还是仅在有人停止输入至少100毫秒(不确定时间是否足够，但决定选择任意量)时才执行搜索?

I'm trying to cut down on the amount of network calls being made/processed. If someone types a string like "res" in a fairly rapid fashion, they probably don't care about the results for "r" or "re," so I was wondering, is there some way I can cancel a request if a new letter is entered in my search box? Or only execute the search if someone has stopped typing for at least 100ms (not sure if this is enough time, but decided to pick an arbitrary amount)?

推荐答案

您追求的目标通常称为反跳.有许多实现此功能的库，包括.lodash和下划线.例如，在 lodash 中，您将执行以下操作:

What you are after is usually called debounce. There is a number libraries that implement this functionality, incl. lodash and underscore. In lodash, e.g., you would do the following:

      onChange={e => debouncedHandler(e, this.handleChange)}

并定义了组件的以下外部:

const debouncedHandler = _.debounced((e, handler) => handler(e), 100);

在组件本身内部声明反跳功能是一个常见的陷阱.这将不起作用，因为react会在每次更改时重新运行该代码，因此会重新创建去抖动的功能，因此不会发生抖动.因此，重要的是在组件外部定义反跳功能.

It is a common pitfall to declare the debounced function inside the component itself. That will not work, because react reruns that code on every change and hence re-created the debounced function, hence the debouncing will not take place. Therefore it is important to define the debounced function outside the component.

更新:我之前的代码有错误.我认为现在已解决.我还没有测试过.

Update: there was a mistake in the code I had earlier. It is fixed now, I think. I haven't tested this.

这篇关于在React中，有什么方法可以让我仅在有人停止输入时才提交搜索请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！