Unieke sleutels via id in React

In die bostaande kode het ons die volgorde nommer van die element in die versameling by die attribuut key gevoeg. Eintlik is hierdie praktyk sleg en moet dit slegs in uiterste gevalle gebruik word.

Die saak is dat wanneer die versameling gesorteer word, die elemente ander sleutels sal hê en React nie die verband tussen die elemente van die versameling en die ooreenstemmende merkers korrek kan opspoor nie.

'n Beter praktyk sal wees om vir elke produk 'n unieke identifikasienommer by te voeg, wat as die sleutel gebruik sal word.

Kom ons voeg vir elke produk in ons versameling die eienskap id by met die nommer van ons produk:

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

Nou gebruik ons hierdie id as die sleutel:

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

Wysig die vorige taak deur id by die versameling by te voeg en dit as waardes vir die attribuut key te gebruik.