ใช้ id เป็นคีย์เฉพาะใน React

ในโค้ดด้านบน ในแอตทริบิวต์ key เราได้เพิ่มหมายเลขลำดับขององค์ประกอบใน อาร์เรย์ ที่จริงแล้ว การปฏิบัติเช่นนี้ถือว่าไม่ดี และควรใช้เฉพาะในกรณีที่จำเป็นจริงๆ เท่านั้น

เหตุผลก็คือเมื่อทำการจัดเรียงอาร์เรย์ใหม่ องค์ประกอบต่างๆ จะมีคีย์ที่เปลี่ยนไป และ React จะไม่ สามารถติดตามความสัมพันธ์ระหว่าง องค์ประกอบของอาร์เรย์และแท็กที่เกี่ยวข้องได้อย่างถูกต้อง

การปฏิบัติที่ดีกว่าคือการเพิ่ม ตัวระบุเฉพาะ (unique identifier) ให้กับแต่ละ สินค้า ซึ่งจะถูกใช้เป็นคีย์

ลองเพิ่มคุณสมบัติ id พร้อมกับหมายเลขสินค้าของเรา ให้กับแต่ละสินค้าในอาร์เรย์ของเราดู:

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

ตอนนี้ให้ใช้ 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>;
}