A React megköveteli, hogy egy egyedi key attribútum legyen a tömb elemeinél. A React docs azt javasolja, hogy használjon egy id jelet az adataiból. Ha nincs id, akkor a tömbindexet "utolsó megoldásként" használhatja, azzal a figyelmeztetéssel, hogy az index használata teljesítményproblémákat okozhat, amikor az elemeket újra lehet rendezni. Bosszantó problémáim voltak akkor is, amikor több forrástömbből és több .map()-hívásból elemtömböt építettem fel, mindegyik különböző átalakításokkal, ebben az esetben a tömb indexei amúgy sem lesznek egyediek.
Elkezdtem bedobni a következő kazánt az alkatrészeimbe:
constructor(props) {
super(props);
this.getId = this.getId.bind(this);
this.id = 0;
}
getId() {
return this.id++;
}
ami így használható:
render() {
const items = this.props.greetings.map(text => ({
<li key={this.getId()}>{text}</li>
}));
return (
<ul>
{items}
</ul>
);
}
Ez egyszerű, gyors, és nem okoz olyan problémákat, mint a tömbindex használata, de nem tudom, van-e probléma ezzel a megközelítéssel vagy jobb alternatívákkal, amelyeket figyelmen kívül hagyok. Ez rossz gyakorlat? Vannak más egyszerű módszerek a key-ek generálására, amelyek nem okoznak problémákat a tömbindexszel?
