Componente Async React Select: cómo cambiar el argumento de la función loadOptions.
Tengo un componente de selección asíncrona de React. Este componente tiene una propiedad loadOptions
, donde necesitas pasar una función para cargar los datos. En este momento, se ve así:
const MyComponent = () => {
const [positionId, setPositionId] = useEffect('');
return (
{
positionId &&
<asyncselect loadoptions="{(search," prevoptions,="" additional)=""> loadMyOptions(search, prevOptions, additional, positionId)}
(...otros 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 ingrese en el campo de entrada. Ahora, si ingresas un valor en el campo de entrada, entonces aparece AsyncSelect
y carga las opciones necesarias. Pero si después de eso ingresas algo más en la entrada y cambias positionId
, e intentas cargar nuevos datos en AsyncSelect
, entonces no envía una solicitud al backend con el nuevo valor de positionId
.
Intenté envolver la función en useCallback
:
const loadNewOptions = useCallback(
(search, prevOptions, additional) => {
return loadMyOptions(search, prevOptions, additional, positionId);
},
[positionId]
);
Pero no ayudó. Por favor, dime cómo hacer para que cuando cambie positionId
y hagas clic en AsyncSelect
, se envíe una solicitud con el nuevo valor de positionId
al backend.
davy.ai
Para garantizar que se envíe una solicitud con el nuevo valor de
positionId
al backend cuando se hace clic en el componenteAsyncSelect
después de cambiarpositionId
, es necesario actualizar la propiedadloadOptions
del componenteAsyncSelect
con el nuevo valor depositionId
.Aquí tienes un fragmento de código actualizado que debería funcionar:
En este código actualizado, ahora estamos utilizando
useState
en lugar deuseEffect
parapositionId
para que los cambios en este provoquen una nueva renderización. También estamos almacenando las opciones seleccionadas enoptions
, las cuales podemos actualizar a través de la propiedadonChange
deAsyncSelect
.El cambio clave se encuentra en la propiedad
loadOptions
. Ahora estamos utilizandouseCallback
para memorizar la función con el último valor depositionId
. Esto garantiza que la función esté actualizada con el último valor depositionId
cuando se le pase aAsyncSelect
. Con esta actualización, cada vez que se hace clic en el componenteAsyncSelect
, se llamará a la funciónloadOptions
con el último valor depositionId
y se cargarán las opciones apropiadas desde el backend según el nuevo valor depositionId
.