He intentado volver a representar una lista de contactos dentro de un carrusel cambiando el objeto de estado en la clase principal. La primera vez que las tarjetas se procesan bien, pero cuando intento agregar un nuevo contacto y actualizar el objeto de estado, el niño no se vuelve a procesar.

He confirmado que el objeto de estado se actualiza correctamente (registrado dentro del gancho useEffect en el componente principal).

Estoy usando el componente @trendyol-js/react-carousel a continuación.

 const [contacts, setContacts] = React.useState([...contactArrayFromDB]); <Carousel className="carosusel" {...settings} rightArrow={ <ArrowForwardIcon className="rightArrow" sx={{ color: styles.color.green }} /> } leftArrow={ <ArrowBackIcon className="backArrow" sx={{ color: styles.color.green }} /> } > {**contacts.map**((item, index) => ( <span> {console.log("rendering card .." + index)} <ContactCard key={item.id} item={item} styles={styles} isEditContacts={true} /> </span> ))} </Carousel>

Cuando actualizo el estado, se muestra el registro "tarjeta de representación..." en la consola, lo que significa que la función de mapa se ejecuta correctamente cada vez que se actualiza el estado.

Seguí todas las soluciones en SO que pude encontrar:

1. Pasó todo el objeto de estado dentro de la propiedad clave del niño. ¡No funcionó! Incluso pasé un número aleatorio a través de item.id que estoy pasando ahora al parámetro clave.
2. Usó un objeto de estado dentro del Niño. No hace diferencia.
3. Al cambiar el objeto de estado en el padre, me aseguré de clonarlo en lugar de cambiar directamente los elementos de la matriz. Todavía no funcionó.

No pude encontrar ninguna solución a la misma. Expertos en React, sugieran cómo puedo solucionar este problema.