Unieke sleutels in 'n reeks tags in React

In die vorige voorbeeld het ons ons paragrawe in 'n lus gevorm, soos volg:

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

Dit sal werk, maar as ons in die konsole kyk - sal ons 'n fout sien: Warning: Each child in an array or iterator should have a unique "key" prop. In hierdie geval vereis React dat ons vir elke tag uit die lus 'n unieke nommer gee, sodat React makliker met hierdie tags kan werk in die toekoms.

Hierdie nommer word bygevoeg met behulp van die attribuut key. In hierdie geval kan ons die nommer van die element in die skikking as nommer neem. In ons geval word hierdie nommer gestoor in die veranderlike index en dus sal die reggestelde lyn so lyk:

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

Kom ons hardloop - die fout sal uit die konsole verdwyn:

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

Nog 'n keer: hierdie attribuut key het 'n diens betekenis vir React, jy sal hierdie punt dieper verstaan in die volgende lesse. Weet vir nou net: as jy so 'n fout sien - voeg die attribuut key by met 'n unieke waarde vir elke tag en die probleem sal verdwyn.

Die sleutel key moet uniek wees slegs binne hierdie lus, in 'n ander lus kan die waardes van key ooreenstem met waardes van 'n ander lus.

Wysig jou oplossing van die vorige taak ooreenkomstig met die beskrywing.