Debounce with LoDash callback issue

[SKempin]

I am attempting to use debounce from lodash but am getting nothing returned from the callback. I've created a sandbox example where you can see the debounced results being console logged. How can I get these to appear as options? The callback doesn't seem to be firing.

https://codesandbox.io/s/react-select-issue2021b-ohr9q?file=/src/App.js

  axios({
    method: "get",
    url: `https://api.github.com/search/users?q=${inputValue}`,
    headers: {}
  })
    .then((response) => response.data)
    .then((data) => console.log(data?.items))
    .then((data) => {
      callback(null, {
        options: data
      });
    });
}, 500);

Thanks

[Rall3n]

Hello @SKempin,

I hope you don't mind me converting your issue to a discussion as it seemed a more appropriate place for your question.

There are a couple of problems with what you are trying to do:

1. The extra Promise chain with your console.log call causes the data parameter in the next chain to be empty.
2. callback expects the first parameter to be an array of options, but you send the whole data as part of an object as the second parameter. Correct is:

   callback(data?.items);

3. Now we have options, but the component does not know of value and label. Either convert the data to objects of schema {value,label} or use the getOptionValue and getOptionLabel props.

   <AsyncSelect
       getOptionValue={option => option.id}
       getOptionLabel={option => option.login}
   />

These fixes should suffice to see your result in the component.

[SKempin]

@Rall3n Thanks for your help on this. I've amended the example with your amends but they still don't fix the issue, as the callback doesn't appear to fire?

https://codesandbox.io/s/react-select-issue2021b-ohr9q?file=/src/App.js

const debouncedFetch = _.debounce((inputValue, callback) => {
  axios({
    method: "get",
    url: `https://api.github.com/search/users?q=${inputValue}`,
    headers: {}
  })
    .then((response) => response.data)
    .then((data) => {
      callback(null, {
        options: data?.items
      });
    });
}, 500);

<AsyncSelect
        cacheOptions={false}
        loadOptions={debouncedFetch}
        placeholder="Search locations..."
        getOptionValue={(option) => option.id}
        getOptionLabel={(option) => option.login}
      />

[Rall3n]

@SKempin You did forget point 2:

callback expects the first parameter to be an array of options, but you send the whole data as part of an object as the second parameter. Correct is:

callback(data?.items);

[SKempin]

@Rall3n excellent, thank you!

[Rall3n]

@SKempin Please don't forget to mark this as the accepted answer!