უნიკალური გასაღებები მასივის ტეგებში React-ში

წინა მაგალითში ჩვენ ვქმნიდით ჩვენს აბზაცებს ციკლში, ასე:

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

ეს იმუშავებს, თუმცა, თუ შევხედავთ კონსოლს - ჩვენ დავინახავთ შეცდომას: Warning: Each child in an array or iterator should have a unique "key" prop. ამ შემთხვევაში React მოითხოვს, რომ ციკლიდან ყოველ ტეგს მივანიჭოთ უნიკალური ნომერი, რათა React-ს უფრო მარტივი იყოს ამ ტეგებთან მუშაობა შემდგომში.

ეს ნომერი ემატება ატრიბუტის 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 აქვს სამსახურეობრივი მნიშვნელობა React-ისთვის, უფრო ღრმად თქვენ გაიგებთ ამ პუნქტს შემდეგ გაკვეთილებზე. ახლა უბრალოდ იცოდეთ: თუ თქვენ ხედავთ ასეთ შეცდომას - დაამატეთ ატრიბუტი key უნიკალური მნიშვნელობით ყოველი ტეგისთვის და პრობლემა გაქრება.

გასაღებს key უნდა ჰქონდეს უნიკალური მნიშვნელობა მხოლოდ ამ ციკლის ფარგლებში, სხვა ციკლში key მნიშვნელობებს შეუძლიათ ემთხვევოდნენ მნიშვნელობებს სხვა ციკლიდან.

მოდიფიცირება გაუკეთეთ თქვენს ამოხსნას წინა ამოცანის აღწერილის შესაბამისად.