Tengo una aplicación React que asigna tarjetas y cada tarjeta tiene una identificación única, aunque recibo un error en la consola que indica que algunas no son únicas:
Advertencia: se encontraron dos niños con la misma llave,
2294264. Las claves deben ser únicas para que los componentes mantengan su identidad a través de las actualizaciones. Las claves que no son únicas pueden hacer que los niños se dupliquen u omitan; el comportamiento no es compatible y podría cambiar en una versión futura.
Aquí está el código para construir la estructura de mi tarjeta:
function CreateCards(doc) { return ( <SimpleCard key={doc.newsid} theCardId={doc.newsid} categorietitle={doc.categorietitle} newstitle={doc.newstitle} date={format(new Date(doc.date), "dd/MM/yyyy")} thenews={doc.thenews} newsurl={doc.newsurl} /> ); }Y aquí está el código para mapear las tarjetas:
<div className="general-card1"> {this.state.noPlaceFound ? ( <h3 className="noPlaceFound"> <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> لا يوجد نتائج </h3> ) : ( this.state.WasMap.map((v) => CreateCards(v._source)) )} </div>¿Podrías ayudarme?
Es porque cuando representa una lista de componentes en un map() , cada componente debe tener una propiedad de key única. Es para React distinguirlos. Lo que hiciste mal es que agregaste la key dentro del componente, donde debería estar cuando se renderiza dentro de map() .
Observe que
key = {index}. Esto funcionaría en la mayoría de los casos, pero es mejor usar unaidpersonalizada (puede reemplazarindexconv._source.newsidsi este es un campo único).
<div className="general-card1"> {this.state.noPlaceFound ? ( <h3 className="noPlaceFound"> <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> لا يوجد نتائج </h3> ) : ( this.state.WasMap.map((v, index) => <CreateCards doc={v._source} key={index} />) )} </div>