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 маанилери башка циклден маанилери менен дал келиши мүмкүн.

Өзүңүздүн мурунку маселеңизди чечүүңүздү сүрөттөлгөндөй өзгөртүңүз.