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ň:

jsxconst 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ň:

jsxfunction 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>;
}