时间戳

首页 > 解决方案 > React Hook 表单 - 控制器 - React AsyncSelect - Lodash Debounce | 未能显示 loadOptions

javascript - React Hook 表单 - 控制器 - React AsyncSelect - Lodash Debounce | 未能显示 loadOptions

问题描述

当我从 lodash 使用时，React 挂钩未在 AsyncSelect 的 loadingOptions 中显示选项debounce。

这是代码。

const NoteFormMaster = ({ register, control, errors }) => {
  
  const getAsyncOptions = (inputText) => {
    return axios
      .get(`/v1/user?username=${inputText}`)
      .then((response) => {
        return response.data.map((user) => ({
          value: user.id,
          label: user.username,
        }));
      })
      .catch((error) => {
        alert(JSON.stringify(error));
      });
  };

  const loadOptions = (inputText) => getAsyncOptions(inputText);
  const debounceLoadOptions = _.debounce(loadOptions, 3000);

  return (
    <Controller
        control={control}
        name="shareWith"
        id="shareWith"
         as={
           <AsyncSelect
              // cacheOptions
              loadOptions={(v) => debounceLoadOptions(v)}
              defaultValue={[]}
              isMulti
              isClearable
              defaultOptions={[]}
           />
         }
      />
    )
  );
};

但是，当我不使用 debounce 时，loadOptions={(v) => getAsyncOptions(v)}它​​可以工作。如何处理这种去抖动？

标签： javascriptreactjs

解决方案

loadOptions期望使用新选项调用回调参数或返回承诺。您debounceLoadOptions返回一个包含在 debounce 函数中的函数，因此它不满足这些要求中的任何一个。

鉴于您的实现，我将像这样替换 loadOptions 函数声明。

  const loadOptions = React.useCallback(
    debounce((inputText, callback) => {
      getAsyncOptions(inputText).then((options) => callback(options));
    }, 3000),
    []
  );

也不需要按原样声明 loadOptions 道具。应该注意的是， loadOptions 属性实际上传递了两个参数，在这种情况下需要第二个参数来设置新选项，因此 select 可以呈现如下：

<AsyncSelect
  // cacheOptions
  loadOptions={loadOptions}
  defaultValue={[]}
  isMulti
  isClearable
  defaultOptions={[]}
/>

这是相应的代码框来尝试一下： https ://codesandbox.io/s/react-select-async-debounce-usecallback-oeixm?file=/src/App.js

推荐阅读