Unikāli atslēgas ar id React

Iepriekš minētajā kodā atribūtā key mēs pievienojām elementa kārtas numuru masīvā. Patiesībā šāda prakse ir slikta, un to vajadzētu izmantot tikai ārkārtējos gadījumos.

Lieta ir tāda, ka, kārtojot masīvu, elementiem būs citas atslēgas, un React nevarēs pareizi izsekot saiknei starp masīva elementiem un atbilstošajiem tagiem.

Labāka prakse būtu katram produktam pievienot unikālu identifikatoru, kas tiks izmantots kā atslēga.

Pievienosim mūsu masīvā katram produktam īpašību id ar sava produkta numuru:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

Tagad kā atslēgu izmantosim šo id:

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