Kunci Unik melalui id dalam React

Dalam kod di atas, pada atribut key kita menambahkan nombor urutan elemen dalam array. Sebenarnya, amalan sedemikian adalah tidak baik dan hanya patut digunakan dalam kes-kes yang terpaksa.

Ini kerana, apabila array disusun, elemen-elemen akan mempunyai kunci yang berbeza dan React tidak dapat mengesan hubungan antara elemen array dan tag yang sepadan dengan betul.

Amalan yang lebih baik adalah dengan menambahkan pengenal unik untuk setiap produk, yang akan digunakan sebagai kunci.

Mari dalam array kita, untuk setiap produk tambahkan sifat id dengan nombor produk kami:

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

Sekarang sebagai kunci, gunakan id ini:

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