0
245
ViewsLa función de mapa de reacción no asigna las teclas correctamente
por alguna razón, recibo el error "cada niño en una lista debe tener una clave única" al devolver el siguiente código. No entiendo por qué sucede esto, ya que asigno específicamente la clave durante el mapeo:
return ( <> {sortfeedCards(feedCards)} {loggedIn === true ? (feedCardsMod.map((card, index) => ( <> <p>{index}</p> <FeedCard key={index} cardData={card} loggedIn={loggedIn} /> </> ))) : ('')} </> ) Y así es como se ve el renderizado... me parece que la variable de índice funciona: 
¡Muchas gracias de antemano!
·
Santiago Gelvez
2 answers
Answer question0
La clave debe estar en el elemento más externo, por lo que en el Fragmento, no en la FeedCard:
feedCardsMod.map((card, index) => ( <React.Fragment key={index}> <p>{index}</p> <FeedCard cardData={card} loggedIn={loggedIn} /> <React.Fragment/> )) (La sintaxis abreviada <></> para fragmentos no permite claves, así que cambié a usar React.Fragment explícitamente)
·
Santiago Gelvez
Report
0
Prueba esto:
return ( <> {sortfeedCards(feedCards)} {loggedIn === true ? (feedCardsMod.map((card, index) => ( <div key={index}> <p>{index}</p> <FeedCard cardData={card} loggedIn={loggedIn} /> </div> ))) : ('')} </> )Las claves deben ser únicas entre las etiquetas adjuntas: https://reactjs.org/docs/lists-and-keys.html
·
Santiago Gelvez
Report
Answer question