用户在typeahead输入框中输入一个很长的数字非常慢，onSearch无法使用react-bootstrap-typeahead版本5.2.1获取完整的数字

Question

​

​

​

​

我正在使用带有onSearch方法的react-bootstrap-typeahead版本5.2.1来处理异步typeahead搜索。问题是，当用户输入一个很长的数字(例如: 99999180)非常慢，或者在999999之后停止输入，然后继续输入180时(您可以从网络上看到序列)，我们无法获得返回的结果，因为查询参数仅显示9999918。但是，数据库中确实存在999999180。相同的代码在基于旧的react-bootstrap-typeahead版本3.4.7的相同场景下工作得很好。不确定这是5.2.1版的一个缺陷吗？提前谢谢。

  const onSearch = async (query) => {
    setIsLoading(true);
    try {
      const data = await typeaheadSearch(query);
      ......
    } finally {
      setIsLoading(false);
      ......
    }
  };

Answer 1

从https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Upgrading.md#v50-breaking-changes发行说明中获得答案

用钩子重写的AsyncTypeahead

这通常应该是一个透明的变化。但是，至少有一个实例可能会破坏现有代码:如果在每次呈现时重新实例化onSearch处理程序，这将取消去抖动的函数，并可能阻止调用onSearch。要避免这种情况，请在构造函数中绑定处理程序，或者使用类属性(如果使用类组件)，或者将useCallback与依赖项数组一起使用(如果使用功能组件)：