React Hook Form - 控制器 - React AsyncSelect - Lodash Debounce | React Hook Form - 控制器 - React AsyncSelect - Lodash Debounce 无法显示 loadOptions

Question

当我使用时，React hook 未在 AsyncSelect 中的 loadingOptions 中显示选项debounce当我使用lodash

这是代码。

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={[]}
           />
         }
      />
    )
  );
};

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

Answer 1

loadOptions期望使用新选项调用回调参数或返回承诺。您debounceLoadOptions返回的函数封装在防抖函数中，因此它不满足这两个要求。

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

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

此外，无需按原样声明 loadOptions 属性。应该注意的是， loadOptions 属性实际上传递回两个参数，在这种情况下需要第二个参数来设置新选项，以便可以像这样呈现选择：

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

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