Kunci Unik dalam Array Tag di React

Dalam contoh sebelumnya, kita membentuk perenggan kita dalam gelung, seperti ini:

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

Ini akan berfungsi, namun, jika kita melihat ke konsol - kita akan lihat ralat: Warning: Each child in an array or iterator should have a unique "key" prop. Dalam kes ini, React memerlukan setiap tag dari gelung diberi nombor unik, supaya React lebih mudah bekerja dengan tag-tag ini pada masa hadapan.

Nombor ini ditambah menggunakan atribut key. Dalam kes ini, sebagai nombor kita boleh ambil nombor elemen dalam array. Dalam kes kita, nombor ini disimpan dalam pembolehubah index dan bermaksud baris yang diperbetulkan akan kelihatan seperti ini:

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

Mari kita jalankan - ralat dari konsol akan hilang:

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

Sekali lagi: atribut key ini mempunyai maksud perkhidmatan untuk React, anda akan memahami perkara ini dengan lebih mendalam dalam pelajaran berikutnya. Buat masa ini, ketahui sahaja: jika anda melihat ralat seperti ini - tambah atribut key dengan nilai yang unik untuk setiap tag dan masalah akan hilang.

Kunci key perlu unik hanya dalam gelung ini, dalam gelung lain nilai key boleh sama dengan nilai dari gelung lain.

Ubah suai penyelesaian anda untuk tugas sebelumnya seperti yang diterangkan.