Reactda massiv teglarida noyob kalitlar

Oldingi misolda biz abzatslarimizni sikl shaklida yaratdik, mana shunday:

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

Bu ishlaydi, ammo, konsolga qarasak - biz xatolikni ko'ramiz: Warning: Each child in an array or iterator should have a unique "key" prop. Bunday holatda React talab qiladiki, sikldagi har bir teg uchun biz noyob raqam beramiz, shunda React uchun keyinchalik bu teglar bilan ishlash osonroq bo'ladi.

Bu raqam key atributi orqali qo'shiladi. Bunday holatda raqam sifatida biz massivdagi elementning indeksini olishimiz mumkin. Bizning holatda bu raqam index o'zgaruvchisida saqlanadi va shuning uchun tuzatilgan qator mana shunday ko'rinadi:

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

Keling ishga tushiramiz - konsoldagi xato yo'qoladi:

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

Yana bir bor: bu key atributi React uchun xizmat ko'rsatuvchi ma'noga ega, siz bu nuqtani keyingi darslarda chuqurroq tushunasiz. Hozircha shunchaki bilings: agar siz bunday xatoni ko'rsangiz - key atributini qo'shing har bir teg uchun noyob qiymat bilan va muammo yo'qoladi.