react-select async callback is not called

Question

I'm using react-select's AsyncSelect component, and try to resolve it from a callback with the following code:

loadOptions(inputValue, callback) {
  this.props.asyncFunctionWithCallback(resp => {
    callback(resp);
  });
}

asyncFunctionWithCallback() is an async function that receives a callback that is called when the promise is resolved:

asyncFunctionWithCallback(doneCallback) {
  // Call some async code
  fetch(url).then(response => { 
    doneCallback(response) 
  }
}

I'm trying to call react-select's callback() from within asyncFunctionWithCallback()'s callback, but seems like it is not being called, as asyncFunctionWithCallback() is being called repeatedly forever.

I guess I'm not passing the callback properly, but cannot figure out what am I doing wrong.

Answer 1

You would need to pass on the res.json value from fetch to the callback like

asyncFunctionWithCallback(doneCallback) {
  // Call some async code
  fetch(url)..then(res => res.json())then(response => { 
    doneCallback(response) 
  }
}

However since you already have an async code its better to use the promist approach for loadOptions

loadOptions(inputValue) {
  return this.props.asyncFunctionWithCallback();
}

asyncFunctionWithCallback() {
  // Call some async code
  return fetch(url)..then(res => res.json());
}