Vitambulisho Vipekee Katika Safu ya Vitambulisho kwenye React

Katika mfano uliopita tulikuwa tukitengeneza aya zetu kwa kutumia kitanzi, kama ifuatavyo:

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

Hii itafanya kazi, hata hivyo, ikiwa tutaangalia kwenye konsole - tutaona kosa: Warning: Each child in an array or iterator should have a unique "key" prop. Katika kesi hii React inahitaji kwamba kila kitambulisho kutoka kwenye kitanzi kipewe nambari ya kipekee, ili iwe rahisi kwa React kufanya kazi na vitambulisho hivi baadaye.

Nambari hii huongezwa kwa kutumia sifa key. Katika kesi hii kama nambari tunaweza kuchukua nambari ya kipengele kwenye safu. Katika kesi yetu nambari hii inahifadhiwa kwenye kigeugeu index na kwa hiyo mstari uliosahihishwa utaonekana kama hii:

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

Wacha tuendeshe - kosa kutoka kwenye konsole litatoweka:

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

Kwa mara nyingine tena: sifa hii key ina thamani ya utumishi kwa React, utaelewa kwa kina zaidi hatua hii katika masomo yajayo. Kwa sasa jua hivi: ikiwa unaona kosa kama hii - ongeza sifa key na thamani ya kipekee kwa kila kitambulisho na tatizo litatoweka.

Ufunguo key lazima uwe wa kipekee ndani ya kitanzi hiki tu, kwenye kitanzi kingine thamani za key zinaweza kuendana na thamani kutoka kwenye kitanzi kingine.

Badilisha suluhisho lako la tatizo lililopita kulingana na yaliyoelezewa.