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

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

const 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 ซึ่งหมายความว่าบรรทัดที่แก้ไขแล้ว จะมีลักษณะดังนี้:

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

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

function 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 พร้อมกับค่าที่ไม่ซ้ำกันสำหรับแต่ละ แท็ก และปัญหาจะหายไป

คีย์ key จำเป็นต้องไม่ซ้ำกัน เฉพาะภายในลูปนี้เท่านั้น ในลูปอื่น ค่าของ key สามารถตรงกับค่าจาก ลูปอื่นได้

แก้ไขโซลูชันของคุณจากโจทย์ก่อนหน้า ตามที่ได้อธิบายไว้