Յունիկալ բանալիները Ռեակտի զանգվածի թեգերում

Նախորդ օրինակում մենք ձևավորում էինք մեր պարբերությունները ցիկլում, ահա այսպես.

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

Սա կաշխատի, սակայն, եթե նայենք կոնսոլին - մենք կտեսնենք սխալ. Warning: Each child in an array or iterator should have a unique "key" prop. Այս դեպքում Ռեակտը պահանջում է, որ ցիկլի յուրաքանչյուր թեգին տանք յունիկալ համար, որպեսզի Ռեակտի համար ավելի հեշտ լինի աշխատել այդ թեգերի հետ հետագայում:

Այս համարը ավելացվում է օգտագործելով ատրիբուտ 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 ունի սպասարկման նշանակություն Ռեակտի համար, ավելի խորը դուք կհասկանաք այս պահը հաջորդ դասերում: Առայժմ պարզապես իմացեք. եթե դուք տեսնում եք նման սխալ - ավելացրեք ատրիբուտ key յուրաքանչյուր թեգի համար յունիկալ արժեքով և խնդիրը կանհետանա:

key բանալին պետք է լինի յունիկալ միայն այս ցիկլի ներսում, մեկ այլ ցիկլում key արժեքները կարող են համընկնել այլ ցիկլի արժեքների հետ:

Մոդիֆիկացրեք ձեր նախորդ առաջադրանքի լուծումը ըստ նկարագրվածի: