1

I have a react async select component. This component has a loadOptions props, where you need to pass a function to load data. At the moment it looks like this

const MyComponent = () => {
  const [positionId, setPositionId] = useEffect('');

  return (
    {
      positionId &&
      <AsyncSelect
        loadOptions={(search, prevOptions, additional) => loadMyOptions(search, prevOptions, additional, positionId)}
          (...other props)
        />
    }

      <Input
      value={positionId}
      onChange={(e) => setPositionId(e.target.value)}
      />
  )
}

The loadMyOptions function describes the data loading logic. This function takes the last parameter, positionId, which changes depending on what was entered in the input field. Now if you enter a value in the input field, then AsyncSelect appears and it loads the necessary options. But if after that you enter something else in input and change the positionId, and try to load new data into AsyncSelect, then it doesn't send a request to the backend with the new positionId value.

I tried to wrap the function in useCallback

const loadNewOptions = useCallback(
  (search, prevOptions, additional) => {
    return loadMyOptions(search, prevOptions, additional, positionId);
  },
  [positionId]
);

But it did not help. Please tell me how to make it so that when changing positionId and clicking on AsyncSelect, a request with a new value of positionId goes to the backend?

Dhia Djobbi
  • 1,176
  • 2
  • 15
  • 35
Max
  • 57
  • 1
  • 8
  • Can you give the link of the react async select lib that you are using? there's a lot of them. – I am L Jan 04 '22 at 13:38
  • Yes sure https://www.npmjs.com/package/react-select-async-paginate – Max Jan 04 '22 at 13:53
  • Would the example explained here solve your issue ? https://stackoverflow.com/questions/52984105/react-select-async-loadoptions-is-not-loading-options-properly – Dimitri Bosteels Jan 05 '22 at 14:51

1 Answers1

0

It seems that there's a race condition somewhere in your code, but you don't have to use the "outer" positionId, instead use the one that you pass instead:

    const loadNewOptions = useCallback((search, prevOptions, additional, posId) => {
      return loadMyOptions(search, prevOptions, additional, posId)
    }, [])
I am L
  • 4,288
  • 6
  • 32
  • 49
  • Thanks for the advice! I tried it but it didn't work. If you try to do like here https://codepen.io/NailG/pen/oNGdayN Then to the backend goes to the value positionId = undefined. Also I tried this option https://codepen.io/NailG/pen/bGoMmKr Then to the backend goes to the value positionId = "" (empty string). It takes the positionId value which is specified by default in setstate – Max Jan 04 '22 at 13:51
  • I also noticed that if you manually delete all values from the input and enter a new value, then when the value is erased and positionId === "" is an empty string, then AsyncSelect is removed from the page and after a new value is entered, then the loadNewOptions function works correctly – Max Jan 04 '22 at 13:52
  • But I need the actual positionId argument to be substituted into the function for loading data – Max Jan 04 '22 at 13:58