Lists & Keys في React: عرض القوائم وتجنب الأخطاء

في أي تطبيق حقيقي ستتعامل مع بيانات متكررة: منتجات، مقالات، مستخدمين، تعليقات. بدل كتابة كل عنصر يدويًا، نستخدم القوائم (Lists) لعرضها تلقائيًا.

في React نستخدم map لتحويل مصفوفة بيانات إلى عناصر JSX. لكن هناك شرط مهم: كل عنصر يجب أن يحتوي على key فريدة.

ما هي القوائم في React؟

القوائم هي طريقة لعرض مجموعة عناصر متكررة باستخدام حلقات مثل map. هذا يجعل الكود أقصر وأسهل صيانة.

التعريف البسيط: map + JSX = قائمة ديناميكية.

مثال بسيط: عرض قائمة أسماء

function NameList() {
  const names = ["Amina", "Omar", "Salma"];

  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

استخدمنا map لتحويل كل اسم إلى عنصر li. وضعنا key باستخدام الاسم نفسه لأنه فريد في هذه القائمة.

الفكرة هنا أن names مصفوفة نصوص بسيطة. عند كل تكرار، نحصل على name ونُرجع عنصر JSX واحد. React يجمع كل العناصر الناتجة ويعرضها كقائمة كاملة.

لماذا نحتاج key في React؟

React يستخدم key لتمييز العناصر عند التحديث. بدونها، قد يعيد React ترتيب العناصر بشكل خاطئ أو يعيد بناء القائمة بالكامل.

تخيّل أن لديك قائمة تتغير باستمرار (إضافة/حذف). بدون key لا يعرف React أي عنصر تغيّر فعلاً، فيقوم بإعادة رسم عناصر أكثر مما يلزم أو يربط الحالة بعنصر خاطئ.

مثال: قائمة منتجات مع id

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

هنا استخدمنا item.id كـ key لأنه ثابت وفريد. هذا هو أفضل اختيار دائمًا عندما يكون لديك id من قاعدة البيانات.

لاحظ أن items مصفوفة من كائنات، وليس نصوص فقط. لذلك نستخدم item.title للعرض، ونستخدم item.id كقيمة فريدة تضمن استقرار القائمة.

هل يمكن استخدام index كـ key؟

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.title}</li>
      ))}
    </ul>
  );
}

استخدام index مسموح لكنه غير مفضّل. إذا تغيّر ترتيب القائمة أو تم حذف عنصر، قد يحدث خلل في الواجهة.

مثال بسيط على الخلل: إذا كانت لديك قائمة مهام ثم حذفت العنصر الأول، فكل العناصر التالية سيتغيّر رقمها (index)، وهذا يجعل React يعتقد أن العناصر تبدّلت بينما هي نفسها.

مثال: عرض قائمة مكوّنات

function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

يمكنك استخدام map لعرض مكوّنات كاملة، وليس فقط عناصر HTML. المهم أن تضع key على المكوّن الذي يُعاد داخل القائمة.

هذا الأسلوب هو الأكثر شيوعًا في التطبيقات الكبيرة: تمرير بيانات كل مستخدم إلى UserCard، فينتج لديك قائمة بطاقات كاملة بدون تكرار للكود.

أخطاء شائعة

• نسيان إضافة key داخل القائمة.
• استخدام index مع قوائم قابلة للتغيير.
• استخدام قيم غير فريدة كـ key مما يسبب مشاكل في التحديث.

الأسئلة الشائعة — FAQ

ما المقصود بالقوائم في React؟

هي طريقة لعرض مجموعة عناصر متكررة باستخدام map داخل JSX.

لماذا نحتاج key في React؟

key يساعد React على تمييز العناصر عند التحديث لتجنب إعادة الرسم الخاطئ.

هل يمكن استخدام index كـ key؟

يفضّل عدم ذلك إلا إذا كانت القائمة ثابتة ولا تتغير.

ما هو أفضل key؟

أفضل key هو قيمة فريدة وثابتة مثل id.

هل يمكن استخدام map مع عناصر JSX؟

نعم، map هي الطريقة الأشهر لإنشاء عناصر JSX من مصفوفة بيانات.