เปลี่ยนอาร์เรย์ของข้อมูลให้เป็นลิสต์ของอิลิเมนต์บนหน้าจอด้วย map และระบุตัวตนของแต่ละอิลิเมนต์ด้วย keys
เปิดบทเรียนนี้ใน Kodokonส่วนติดต่อผู้ใช้เต็มไปด้วยลิสต์: ข้อความในบทสนทนา สินค้าในร้านค้า เพลงในเพลย์ลิสต์... แทนที่จะคัดลอกและวางแท็กด้วยมือ คุณเริ่มจาก อาร์เรย์ ของข้อมูลแล้วแปลงมันด้วยเมธอด map ทบทวนสั้น ๆ: map นำฟังก์ชันไปใช้กับ ทุกองค์ประกอบ ของอาร์เรย์ และคืนค่าเป็น อาร์เรย์ใหม่ ที่มีผลลัพธ์
const fruits = ["apple", "banana", "kiwi"];
const upperFruits = fruits.map(function (fruit) {
return fruit.toUpperCase();
});
console.log(upperFruits);ใน React คุณทำแบบเดียวกันเป๊ะ ยกเว้นว่าฟังก์ชันที่ส่งเข้าไปใน map จะคืนค่าเป็น JSX แทนที่จะเป็นสตริง React รู้วิธีแสดงอาร์เรย์ของอิลิเมนต์ JSX: มันเรนเดอร์ทีละตัวต่อ ๆ กัน ข้อกำหนดเดียวคือต้องให้ prop พิเศษชื่อ key แก่แต่ละอิลิเมนต์
function FruitList() {
const fruits = ["apple", "banana", "kiwi"];
return (
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}key มีไว้ทำอะไร? มันคือ ป้ายกำกับที่ไม่ซ้ำกัน ที่ช่วยให้ React จดจำแต่ละอิลิเมนต์ได้เมื่อลิสต์เปลี่ยนแปลง (การเพิ่ม การลบ การจัดเรียงใหม่) เหมือนบัตรหมายเลขที่จุดฝากเสื้อโค้ต: ถ้าไม่มีหมายเลข ก็ไม่มีทางคืนเสื้อโค้ตให้ถูกตัวได้ ต้องขอบคุณ keys ที่ทำให้ React อัปเดตเฉพาะสิ่งที่เปลี่ยนแปลงจริง ๆ ในทางปฏิบัติ key ที่ดีที่สุดคือ ตัวระบุที่ไม่ซ้ำและคงที่ ที่มาจากข้อมูลของคุณ เช่นฟิลด์ id
const tasks = [
{ id: 1, label: "Buy groceries" },
{ id: 2, label: "Water the plants" },
];
function TaskList() {
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.label}</li>
))}
</ul>
);
}key มีไว้ทำอะไร?