Калидҳои ягона дар массиви тегҳо дар 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 метавонанд бо арзишҳои аз сикли дигар ҳамроҳ шаванд.

Ҳалли худро аз вазифаи қаблӣ мувофиқи тавзеҳдодашуда ислоҳ кунед.