Tengo un problema con el colapso del diseño de hormigas que no puedo resolver. Tengo una lista de ofertas en una matriz de estado. Para cada elemento, creé dinámicamente un panel. Si abrimos este panel contiene un botón. Cuando se hace clic en el botón, elimino el elemento específico de mi estado. Hasta que este punto funcione bien, el estado se actualiza y los elementos del panel se renderizan sin contener el eliminado.

Pero aquí viene el problema: si hacemos clic en el botón eliminar en un panel que tiene otros paneles siguientes, el siguiente panel también se abrirá aunque esté cerrado. El estado se actualiza, pero la clave activa del colapso sigue siendo la misma por alguna razón.

La pregunta: ¿Cómo puedo actualizar también la clave activa si se elimina un elemento? Gracias.

Mi código:

const [RecievedOffers, setRecievedOffers] = useState([])

const renderRecievedOffers = (Offers) => Offers.map((offer, index) => {
<Panel header={'Test'} key={index}>
       ..some other things
       <Button shape="circle" icon={<MinusOutlined />} size="medium" onClick={() => handleRecievedOfferDecline(offer.OfferID)} />
</Panel>
}

const handleRecievedOfferDecline = async (offerId) => {
  let newRecievedOffers = RecievedOffers.filter( (offer) => offer.OfferID !== offerId)
  setRecievedOffers([...newRecievedOffers])
}

return (
 <Collapse accordion>
 {renderRecievedOffers(RecievedOffers)}
</Collapse>)

Gracias de antemano

1
MrNobody 7 may. 2021 a las 23:22

1 respuesta

La mejor respuesta

Esto sucede porque el index del mapa se usa como clave para la lista de paneles. Esto puede causar problemas con el estado de la lista cuando cambia el orden de los elementos, como ocurre en su caso. No se recomienda utilizar índices para las claves como se menciona y explica en React docs .

Dado que está mapeando los objetos offer, puede usar sus OfferID como claves para la lista, lo que debería resolver su problema.

1
Pawel Laskowski 7 may. 2021 a las 22:54