Básicamente, tengo una página que consta de tres componentes principales. Un mapa, un cuadro de búsqueda personalizado y una lista que muestra las ubicaciones seleccionadas, que se almacena en el estado del componente principal. Para cada ubicación, representa un componente (MarkerList) que tiene su propio estado e interactividad. Estos componentes se crean mediante una función .map().

El problema surge cuando un usuario interactúa con los otros dos componentes. Cualquier actualización del estado del componente principal hace que se cree una nueva matriz de componentes de lista y, por lo tanto, restablece el estado de ese componente. Según tengo entendido, esto es lo que se supone que debe hacer .map.

Intenté envolver el .map en una devolución de llamada, y eso funciona hasta que se actualiza itemList, y luego se restablece toda la interactividad con cualquiera de los componentes de la lista porque todos los componentes son nuevos. También intenté representar una matriz de los componentes en lugar de usar la función .map() sin éxito.

 return ( <div> <TestMap /> <div> <Search items={items} /> {itemList.map(i => <MarkerList key={uuid()} items={i.items}/> )} </div> </div> )

He omitido gran parte del estilo y los accesorios. Pero los componentes TestMap y Search tienen accesorios que les permiten alterar el estado de este componente.

¿Hay alguna forma de renderizar los componentes de MarkerList de tal manera que no se destruyan/creen en cada cambio de estado? ¿Y habría alguna forma de "recordar" el estado de cada MarkerList cuando se agrega un nuevo elemento a la lista de elementos? ¡Cualquier ayuda sería muy apreciada!