React Hook窗体-控制器- React AsyncSelect - Lodash Debounce |显示loadOptions失败

Question

当我从lodash使用loadingOptions时，React钩子没有在AsyncSelect的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={[]}
           />
         }
      />
    )
  );
};

但是，当我没有像loadOptions={(v) => getAsyncOptions(v)}那样使用去抖动时，它就能工作了。如何处理这种反跳？

Answer 1

loadOptions期望使用新的选项调用回调参数，或者返回一个promise。您的debounceLoadOptions返回一个封装在does函数中的函数，因此它不能满足这两个要求。

根据您的实现，我将替换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