คีย์ที่ไม่ซ้ำกันในอาเรย์ของแท็กใน React

ในตัวอย่างก่อนหน้านี้ เราได้สร้าง ย่อหน้าของเราด้วยลูป แบบนี้:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

วิธีนี้จะใช้งานได้ อย่างไรก็ตาม หากมองเข้าไป ในคอนโซล - เราจะเห็นข้อผิดพลาด: Warning: Each child in an array or iterator should have a unique "key" prop. ในกรณีนี้ React ต้องการให้เราใส่หมายเลขที่ไม่ซ้ำกันให้กับแต่ละแท็กจากลูป เพื่อให้ React ทำงานกับแท็กเหล่านี้ได้ง่ายขึ้นในอนาคต

หมายเลขนี้จะถูกเพิ่มโดยใช้แอตทริบิวต์ key ในกรณีนี้ เราสามารถใช้ ตำแหน่งขององค์ประกอบในอาเรย์ เป็นหมายเลขได้ ในกรณีของเรา ตำแหน่งนี้เก็บอยู่ในตัวแปร index ซึ่งหมายความว่าบรรทัดที่แก้ไขแล้ว จะมีลักษณะดังนี้:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

ลองรันดู - ข้อผิดพลาดในคอนโซลจะหายไป:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

อีกครั้ง: แอตทริบิวต์ key นี้มีค่า สำหรับการทำงานภายในของ React คุณจะเข้าใจ จุดนี้ลึกซึ้งยิ่งขึ้นในบทเรียนต่อๆ ไป สำหรับตอนนี้แค่ รู้ไว้: หากคุณเห็นข้อผิดพลาดเช่นนี้ - ให้เพิ่ม แอตทริบิวต์ key พร้อมกับค่าที่ไม่ซ้ำกันสำหรับแต่ละ แท็ก และปัญหาจะหายไป