v19.2Latest

عرض القوائم

ستحتاج غالبًا إلى عرض عدة مكونات متشابهة من مجموعة بيانات. يمكنك استخدامطرق مصفوفات جافا سكريبتلمعالجة مصفوفة من البيانات. في هذه الصفحة، ستستخدمfilter() و map()مع React لتصفية وتحويل مصفوفة البيانات الخاصة بك إلى مصفوفة من المكونات.

ما ستتعلمه
  • كيفية عرض المكونات من مصفوفة باستخدامmap() في جافا سكريبت
  • كيفية عرض مكونات محددة فقط باستخدامfilter() في جافا سكريبت
  • متى ولماذا تستخدم مفاتيح React

عرض البيانات من المصفوفات

لنفترض أن لديك قائمة من المحتوى.

الفرق الوحيد بين عناصر القائمة هذه هو محتواها، أي بياناتها. غالبًا ما ستحتاج إلى عرض عدة نسخ من نفس المكون باستخدام بيانات مختلفة عند بناء الواجهات: من قوائم التعليقات إلى معارض صور الملفات الشخصية. في هذه الحالات، يمكنك تخزين تلك البيانات في كائنات ومصفوفات جافا سكريبت واستخدام طرق مثلmap() و filter()لعرض قوائم المكونات منها.

إليك مثالًا قصيرًا لكيفية إنشاء قائمة من العناصر من مصفوفة:

  1. انقلالبيانات إلى مصفوفة:
  1. حوّلأعضاءpeopleإلى مصفوفة جديدة من عقد JSX،listItems:
  1. أعدlistItemsمن مكونك ملفوفة في<ul>:

هذه هي النتيجة:

لاحظ أن الحقل الرملي أعلاه يعرض خطأ في وحدة التحكم:

وحدة التحكم

تحذير: يجب أن يكون لكل عنصر فرعي في القائمة خاصية "مفتاح" فريدة.

ستتعلم كيفية إصلاح هذا الخطأ لاحقًا في هذه الصفحة. قبل أن نصل إلى ذلك، دعنا نضيف بعض الهيكلة لبياناتك.

تصفية مصفوفات العناصر

يمكن هيكلة هذه البيانات أكثر.

لنفترض أنك تريد طريقة لعرض الأشخاص الذين مهنتهم'chemist'فقط. يمكنك استخدام طريقةfilter()في جافا سكريبت لإعادة هؤلاء الأشخاص فقط. تأخذ هذه الطريقة مصفوفة من العناصر، وتمررها عبر "اختبار" (دالة تُرجعtrueأوfalse)، وتعيد مصفوفة جديدة تحتوي فقط على العناصر التي اجتازت الاختبار (أعادتtrue).

تريد فقط العناصر التي تكون فيهاprofessionهي'chemist'. تبدو دالة "الاختبار" لهذا كالتالي(person) => person.profession === 'chemist'. إليك كيفية تجميعها معًا:

  1. أنشئمصفوفة جديدة تحتوي فقط على الأشخاص من فئة "الكيميائيين"،chemists، عن طريق استدعاءfilter()على مصفوفةpeopleمع التصفية حسب الشرطperson.profession === 'chemist':
  1. الآنقم بالتعيينعلى مصفوفةchemists:
  1. أخيرًا،أعدقيمةlistItemsمن المكون الخاص بك:
مأزق

دوال السهم تُعيد التعبير الموجود مباشرة بعد=>ضمنيًا، لذا لم تكن بحاجة إلى جملةreturn:

ومع ذلك،يجب عليك كتابةreturnبشكل صريح إذا كان الرمز=>متبوعًا بقوس معقوف{!

يُقال إن دوال السهم التي تحتوي على=> { تمتلك "جسم كتلة".فهي تتيح لك كتابة أكثر من سطر واحد من التعليمات البرمجية، لكنكيجب عليككتابة جملةreturnبنفسك. إذا نسيتها، فلن يُعاد أي شيء!

الحفاظ على ترتيب عناصر القائمة باستخدامkey

لاحظ أن جميع صناديق الرمل أعلاه تعرض خطأ في وحدة التحكم:

وحدة التحكم

تحذير: يجب أن يكون لكل عنصر فرعي في القائمة خاصية "key" فريدة.

يجب أن تعطي لكل عنصر في المصفوفةkey— وهي سلسلة نصية أو رقم يميزه بشكل فريد بين العناصر الأخرى في تلك المصفوفة:

ملاحظة

عناصر JSX الموجودة مباشرة داخل استدعاءmap()تحتاج دائمًا إلى مفاتيح!

تخبر المفاتيح React بأي عنصر مصفوفة يتوافق مع كل مكون، حتى تتمكن من مطابقتها لاحقًا. يصبح هذا مهمًا إذا كانت عناصر مصفوفتك يمكن أن تتحرك (مثلًا بسبب الفرز)، أو تُدرج، أو تُحذف. يساعد المفتاح المُختار جيدًا React على استنتاج ما حدث بالضبط، وإجراء التحديثات الصحيحة على شجرة DOM.

بدلاً من إنشاء المفاتيح على الفور، يجب تضمينها في بياناتك:

Deep Dive
عرض عدة عقد DOM لكل عنصر في القائمة

من أين تحصل علىkey

توفر مصادر البيانات المختلفة مصادر مختلفة للمفاتيح:

  • البيانات من قاعدة بيانات:إذا كانت بياناتك قادمة من قاعدة بيانات، يمكنك استخدام مفاتيح/معرفات قاعدة البيانات، والتي تكون فريدة بطبيعتها.
  • البيانات المُنشأة محليًا:إذا تم إنشاء بياناتك واستمرارها محليًا (مثل الملاحظات في تطبيق تدوين الملاحظات)، استخدم عدادًا تصاعديًا، أوcrypto.randomUUID()، أو حزمة مثلuuidعند إنشاء العناصر.

قواعد المفاتيح

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

لماذا يحتاج React إلى مفاتيح؟

تخيل أن الملفات على سطح مكتبك لم تكن لها أسماء. بدلاً من ذلك، كنت تشير إليها حسب ترتيبها - الملف الأول، الملف الثاني، وهكذا. يمكنك التعود على ذلك، ولكن بمجرد حذف ملف، سيصبح الأمر محيرًا. سيصبح الملف الثاني هو الملف الأول، والملف الثالث سيكون الملف الثاني، وهكذا.

أسماء الملفات في مجلد ومفاتيح JSX في مصفوفة تخدم غرضًا مشابهًا. فهي تتيح لنا تحديد عنصر بشكل فريد بين أشقائه. يوفر المفتاح المختار جيدًا معلومات أكثر من الموضع داخل المصفوفة. حتى إذا تغيرالموضعبسبب إعادة الترتيب، فإنkeyيتيح لـ React تحديد العنصر طوال فترة حياته.

مأزق

قد تميل إلى استخدام فهرس العنصر في المصفوفة كمفتاح له. في الواقع، هذا ما سيستخدمه React إذا لم تحددkeyعلى الإطلاق. لكن الترتيب الذي تعرض به العناصر سيتغير بمرور الوقت إذا تم إدراج عنصر أو حذفه، أو إذا تمت إعادة ترتيب المصفوفة. غالبًا ما يؤدي استخدام الفهرس كمفتاح إلى أخطاء خفية ومربكة.

وبالمثل، لا تقم بإنشاء مفاتيح على الفور، على سبيل المثال باستخدامkey={Math.random()}. سيؤدي هذا إلى عدم تطابق المفاتيح أبدًا بين عمليات التصيير، مما يؤدي إلى إعادة إنشاء جميع مكوناتك وDOM في كل مرة. ليس هذا بطيئًا فحسب، بل سيؤدي أيضًا إلى فقدان أي إدخال للمستخدم داخل عناصر القائمة. بدلاً من ذلك، استخدم معرفًا ثابتًا يعتمد على البيانات.

لاحظ أن مكوناتك لن تستقبلkeyكخاصية (prop). إنه يستخدم فقط كتلميح من قبل React نفسه. إذا كان مكونك يحتاج إلى معرف، يجب عليك تمريره كخاصية منفصلة:<Profile key={id} userId={id} />.

ملخص

في هذه الصفحة تعلمت:

  • كيفية نقل البيانات خارج المكونات وإلى هياكل البيانات مثل المصفوفات والكائنات.
  • كيفية إنشاء مجموعات من المكونات المتشابهة باستخدام دالةmap()في جافا سكريبت.
  • كيفية إنشاء مصفوفات من العناصر المفلترة باستخدام دالةfilter()في جافا سكريبت.
  • لماذا وكيفية تعيينkeyلكل مكون في مجموعة حتى يتمكن React من تتبع كل منها حتى إذا تغير موضعها أو بياناتها.

Try out some challenges

Challenge 1 of 4:Splitting a list in two #

This example shows a list of all people.

Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.

上一篇التقديم الشرطي下一篇الحفاظ على نقاء المكونات