Tengo un componente de selección asíncrona de reacción. Este componente tiene accesorios loadOptions , donde debe pasar una función para cargar datos. Por el momento se ve así

 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)} /> ) }

La función loadMyOptions describe la lógica de carga de datos. Esta función toma el último parámetro, positionId , que cambia según lo que se ingresó en el campo de entrada. Ahora, si ingresa un valor en el campo de entrada, aparece AsyncSelect y carga las opciones necesarias. Pero si después de eso ingresa algo más en la entrada y cambia el positionId , e intenta cargar nuevos datos en AsyncSelect , entonces no envía una solicitud al backend con el nuevo valor de positionId .

Traté de envolver la función en useCallback

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

Pero no ayudó. Dígame cómo hacer que al cambiar positionId y hacer clic en AsyncSelect , una solicitud con un nuevo valor de positionId vaya al backend.