Estoy construyendo un componente de búsqueda. Tengo un punto final de API al que puedo agregar searchParams según el menú desplegable que elija el usuario. También hace una llamada por separado para averiguar qué contenido desplegable incluirá.
Entonces, un usuario podría escribir "Audi" y luego los menús desplegables se completarían previamente con varias opciones como "Tipo de motor", pero son opcionales.
El resultado es una respuesta de una API que contiene una matriz de todos los vehículos coincidentes. Bastante simple.
Lo interesante es que los menús desplegables viven en su propio componente <AdvancedDropdowns> . En la carga de la página, el padre <Search /> que alberga ` transmite las opciones recuperadas recientemente, llenándolas en el renderizado inicial. En otras palabras, ahora los menús desplegables tienen "V4, V8", etc. como opciones para, por ejemplo, el menú desplegable Motor.
Estoy pasando un controlador a <AdvancedDropdowns /> para que cuando un usuario elija, por ejemplo, V8 como una opción desplegable, necesito hacer otra llamada en tiempo real al punto API original, excepto que la URL se parece más a esto: api.com/?query=audi&engine=v4 . Esto volverá a representar la lista, pero también volverá a representar el componente secundario <AdvancedDropdowns /> y, por lo tanto, borrará las selecciones.
El problema es que si hacen una sola selección, el controlador se ejecutará, se llamará a la URL ahora modificada y, a medida que la lista se vuelve a representar, es imposible seleccionar más de un menú desplegable a la vez porque al seleccionar solo uno, el re -render borra la lista.
He estado pensando en usar el renderizado como una oportunidad para pasar las selecciones grabadas al menú desplegable y dejar que establezca sus valores predeterminados en lo que ya estaba seleccionado mientras se vuelve a renderizar, pero parece un poco extraño.
Este es el comportamiento que me gustaría ver:
La idea es sentirse lo más receptivo posible a un "filtro", pero estoy luchando porque volver a renderizar borra las selecciones desplegables anteriores.
Espero que tenga sentido.
Cualquier consejo sería apreciado.
Esto suena como si estuviera configurando algún estado o ejecutando algún efecto secundario cuando esa URL cambia.
¿Está configurando un estado que están usando los <AdvancedDropdowns /> s? Si es así, cualquiera de ellos que esté usando cualquier parte del estado (s) que cambie se volverá a representar cuando se cambie/establezca.
Recomendaría usar múltiples useState() s, uno para cada menú desplegable, de modo que cuando envíe la llamada a la API y actualice el siguiente <AdvancedDropdowns /> configurando el estado, no afectará a ningún otro menú desplegable.