React bilan ishlashda ro'yxatlarda kalitlarni qanday…

React'da kalitlar, ro'yxatdagi elementlarni ularning render qilinishi vaqtida identifikatsiya qilish uchun ishlatiladi. Bu Reactga UI ni samarali yangilashga yordam beradi, qaysi elementlar o'zgargan, qo'shilgan yoki o'chirilganligini aniqlash orqali.

Kalitlarni tayinlashning asosiy prinsiplari:

Yagona: Har bir kalit o'zaro yonma-yon elementlar orasida yagona bo'lishi kerak.
Barqarorlik: Kalit, komponentning butun hayoti davomida bir xil element uchun doimiy bo'lishi kerak, hatto qayta render qilinsa ham.

Optimal kalit tayinlash usullari:

Ma'lumotlarning yagona identifikatoridan foydalanish: Agar ma'lumotlaringizda barqaror va yagona ID (masalan, ma'lumotlar bazasidan id) bo'lsa, uni kalit sifatida foydalaning.

// Faraz qilaylik, sizda yagona ID ga ega obyektlar massiv bor
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Bu usul eng tavsiya etiladi, chunki u ma'lumotlarda har qanday o'zgarish (tartibni o'zgartirish, qo'shish, o'chirish) bo'lsa ham, kalitning barqarorligini ta'minlaydi.

Massiv indeksidan foydalanish (ehtiyot bo'ling): Faqat juda maxsus holatlarda, masalan:
- Ro'yxat statik va hech qachon o'zgarmaydi.
- Ro'yxatdagi elementlar hech qachon qayta tartibga solinmaydi, qo'shilmaydi yoki o'chirilmaydi.
- Ro'yxat filtrlash qilinmaydi.
```
// Faqat agar items hech qachon o'zgarmasa
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Muhim: Noto'g'ri ro'yxatlarda indeksni kalit sifatida ishlatish UI ning noto'g'ri ishlashiga, elementlarning holatini yo'qotishiga (masalan, inputga kiritilgan matn) yoki samarali bo'lmagan renderga olib kelishi mumkin. React noto'g'ri kalitlar bilan komponentlarni qayta ishlatishi mumkin.

Ma'lumotlarning kombinatsiyasiga asoslangan kalit yaratish: Agar ma'lumotlaringizda yagona ID bo'lmasa, bir nechta barqaror xususiyatlar asosida kompleks kalit yaratish mumkin. Ammo, bu yagona ID ishlatishdan kamroq tavsiya etiladi.

// Misol: nom va sanani birlashtirish
const events = [
  { name: 'Party', date: '2023-10-26' },
  { name: 'Meeting', date: '2023-10-27' },
];

function EventList({ events }) {
  return (
    <ul>
      {events.map(event => (
        <li key={`${event.name}-${event.date}`}>{`${event.name} - ${event.date}`}</li>
      ))}
    </ul>
  );
}

Xulosa qilib aytganda: eng tavsiya etilgan va xavfsiz usul har doim ma'lumotlarning yagona va barqaror identifikatoridan foydalanishdir. Indeksni ishlatish juda kam hollarda va faqat statik ro'yxatlar uchun ma'qul.

React bilan ishlashda ro'yxatlarda kalitlarni qanday tartibga solasiz?