使用带有 antd select 的去抖动搜索处理程序答案

【问题标题】：Using a debounced search handler with antd select使用带有 antd select 的去抖动搜索处理程序
【发布时间】：2023-01-30 15:57:23
【问题描述】：

我正在尝试围绕 antd 的 Select 创建一个包装器组件，它添加了一个去抖功能来处理搜索输入。我正在使用 lodash 的 debounce util 函数。

但是我遇到了一个错误：

您键入并暂停以触发去抖功能，这是第一次，效果很好。
但是，当您随后尝试将按键添加到搜索文本时，搜索值不会按预期生成。

我创建了一个最小的沙箱，在这里复制了这种行为： https://codesandbox.io/s/vigorous-glade-495f2z?file=/src/Select.jsx。

【问题讨论】：

标签： reactjs lodash antd

【解决方案1】：

该值仅在去抖功能中更改。出于这个原因，它只能在 debounce 触发时更新值我已经在您的代码中进行了更改，这似乎有效：

  function internalHandleSearch(value) {
    console.log("handleSearch", value);
    // await fetch.post('/your-search', { search: value });
  }

  function searchHandlerWithDebounce(value) {
    console.log("actualHandler", value);
    setSearchValue(value);
    debouncedFn(value, internalHandleSearch);
    // internalHandleSearch(value);
    return;
  }

【讨论】：