React-daky id arkaly unikal açar
Ýokarda görkezilen kodda, key atributyna
biz massiwdaky elementleriň tertip belgisini
goşduk. Aslynda, şeýle amal erbet hasaplanylýar we
diňe iň soňky ýagdaýda ulanylmagy hökmanydyr.
Sebäbi, massiw tertiplenende, elementleriň açarlary üýtgeşik bolar we React massiw elementleri bilen degişli tegleriň arasyndaky baglanyşygy nädogry yzarlaýar.
Has gowy amal, her önüme unikal identifikator goşmak bolar, we ol açaryň ýerine ulanylar.
Geliň, biziň massiwymyzda her önüme özüniň
id hossaryny önümiň belgisi bilen goşalyň:
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];
Indi açar hökmünde şu id-y ulanalyň:
function App() {
const res = prods.map(function(item) {
return <p key={item.id}>
<span>{item.name}</span>:
<span>{item.cost}</span>
</p>;
});
return <div>
{res}
</div>;
}
Öňki meseläni üýtgediň, massiwe id
goşup we olary key atributynyň bahasy
hökmünde ulanyň.