Unikaalsed võtmed massiivi elementides Reactis

Eelmises näites moodustasime oma lõigud tsüklis, nii:

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

See töötab, kuid kui vaadata konsooli - näeme viga: Warning: Each child in an array or iterator should have a unique "key" prop. Sel juhul nõuab React, et iga tsüklist saadud elemendi annaksime unikaalse numbri, et Reactil oleks lihtsam nende elementidega edaspidi töötada.

See number lisatakse atribuudi key abil. Sel juhul saame numbriks võtta elemendi numbri massiivis. Meie juhul see number salvestub muutujasse index ja seega parandatud rida näeb välja selline:

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

Käivitame - viga konsoolist kaob:

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

Veelkord: see atribuut key on teenindus- väärtusega Reactile, sügavamalt saate aru sellest punktist järgmistes õppetükides. Praegu lihtsalt teadke: kui näete sellist viga - lisage atribuut key unikaalse väärtusega iga elemendi jaoks ja probleem kaob.

Võti key peab olema unikaalne vaid selle tsükli sees, teises tsüklis võivad väärtused key kattuda väärtustega teisest tsüklist.

Modifitseerige oma eelmise ülesande lahendust vastavalt kirjeldatule.