javascript - React Hook Form - Controller - React AsyncSelect - Lodash Debounce | Failed showing loadOptions - Stack Overflow

admin管理员组

文章数量:1406033

React hook not showing option in loadingOptions in AsyncSelect when I use debounce from lodash.

Here is the code.

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

But, when I am not use debounce like loadOptions={(v) => getAsyncOptions(v)} It works. How to handle this debounce?

React hook not showing option in loadingOptions in AsyncSelect when I use debounce from lodash.

Here is the code.

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

But, when I am not use debounce like loadOptions={(v) => getAsyncOptions(v)} It works. How to handle this debounce?

• javascript
• reactjs

Share Follow edited Jul 5, 2021 at 23:06 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jan 15, 2021 at 5:07 Fadly DzilFadly Dzil 2,23655 gold badges4242 silver badges9393 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

loadOptions expects that a callback parameter is called with the new options or that a promise is returned. Your debounceLoadOptions returns a function wrapped in a debounce function so it does not fulfill either of these requirements.

Given your implementation, I would replace the loadOptions functions declaration like this.

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

Also there is no need to declare the loadOptions prop as is. It should be noted that the loadOptions prop actually passes two parameters back and the second one is needed in this case to set the new options so the select can be rendered like this:

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

Here is the corresponding codesandbox to try it out: https://codesandbox.io/s/react-select-async-debounce-usecallback-oeixm?file=/src/App.js

本文标签：