react-bootstrap-typeahead 5.2.1版本onSearch无法获取完整长数字输入值问题

问题结论 #

这个确实是react-bootstrap-typeahead 5.2.1版本的已知缺陷，和版本迭代的逻辑变更直接相关。

原因说明 #

• v3.4.7版本没有内置onSearch防抖逻辑，每次输入都会实时触发请求，能拿到最新的完整query值
• v4.0及以上版本默认给onSearch加了200ms的内置防抖，v5.2.1版本的防抖实现存在取值漏洞：当用户输入停顿时间刚好接近防抖阈值时，防抖回调取到的query是触发防抖瞬间的输入值，后续输入的字符不会触发新的请求，就会出现你看到的query少一位、搜索不到对应结果的情况。

修复方案 #

两个方案都可以快速解决问题，可根据自己的项目情况选择：

• 方案一：手动关闭内置防抖，自定义防抖逻辑。给Typeahead组件加debounce={0}属性即可关闭内置防抖，如果需要防抖优化请求量，自己用防抖函数包一层搜索逻辑即可，参考代码：

import { useCallback } from 'react';
import { debounce } from 'lodash';

const onSearch = useCallback(
  debounce(async (query) => {
    setIsLoading(true);
    try {
      const data = await typeaheadSearch(query);
      // 原有结果处理逻辑
    } finally {
      setIsLoading(false);
    }
  }, 200), // 可自行调整防抖时长
  []
);

• 方案二：升级组件版本。直接将react-bootstrap-typeahead升级到v5.3.0及以上版本，这个防抖取值缺陷已经在后续小版本修复，升级后原有代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Yang Wang