Estoy usando Inertia.js y me encanta.

Tengo un problema de todos modos que parece que no puedo resolver. Tengo una entrada de selección que contendrá opciones de la base de datos, pero muchas de ellas aproximadamente. 30/40k, por lo que mi idea es simplemente tomar los primeros 20 y luego dejar que el usuario ingrese una búsqueda y traiga los primeros 20 que coincidan con ese resultado.

Todo mi backend funciona bien, pero el problema que tengo es mostrar las opciones de selección actualizadas después de la búsqueda.

El código relevante es el siguiente: Primero, la llamada a AsyncSelect Component desde el paquete react-select. Este componente necesita una propiedad loadOptions que llamará a una función cuando el usuario comience a escribir

 <AsyncSelect name="proveedores" id="proveedores" defaultOptions={proveedores} loadOptions={handleChange} />

La función que recibe la llamada es esta, recibe el valor de entrada y una devolución de llamada, dentro de esta devolución de llamada se supone que debo buscar los nuevos datos y devolverlos.

 function handleChange(inputValue,callback) { setValues(values => ({ ...values, ["search"]: inputValue })); callback() }

El problema es que para cargar los nuevos datos en la búsqueda estoy usando useEffect

 useEffect(() => { if (prevValues) { const query = pickBy(values) Inertia.get(window.location.href, query, { replace: true, preserveState: true }); } }, [values]);

La búsqueda con useEffect funciona bien, si hago un console.log, veré la lista de proveedores actualizada, pero el problema es cómo le digo a la devolución de llamada de la función handleChange que debe escuchar useEffect y al terminar usar el nuevo valor de proveedores.

Si alguien tuviera que hacer algo como esto (React Select con datos de búsqueda de la base de datos) usando Inertia + React, realmente agradecería algunos comentarios sobre cómo lograrlo.

¡¡Gracias!!