إستعمال map في react js

إن map هي تابع في javascript يقوم بأخذ كل عنصر من حاوية ما (مثلا list) و تطبيق تابع معين عليها، لصنع حاوية أخرى من نتيجة تطبيق التابع على كل عنصر من الحاوية الأولى.

في مثالك هذا لديك list من الأغراض، و حسب ما يبدو لي فإن كل غرض يمثل نوع معين من الأزهار مع معلومات عنه.

عندما قمت بتطبيق map على هذه ال list فإنك ستقوم بتحويل كل عنصر في ال list عن طريق تابع ستمرره لل map، التابع الذي قمت باستعماله سيأخذ غرض (حيث أن كل عنصر في المصفوفة هي غرض) و في ال javascript يمكننا أخذ خصائص معينة من الغرض باستعمال قوسين {} بالإضافة إلى الخصائص التي نريدها، بالتالي هنا نأخذ الخصائص id,cover,name,water,light، و نقوم ببناء مكون باستعمال قيم هذه الخصائص، أي سيتم إنشاء list جديدة تحوي على نتيجة تطبيق التابع الذي كتبته على كل غرض في ال list الأصلية التي لديك.

إذا كان هذا الكود هو نفسه الذي تستعمله فهو ينقصه بعض الأشياء لكي يعمل بشكل صحيح.

أولاً: الدالة map تقوم بعمل loop على مصفوفة ما وتعيد لك مصفوفة أخرى يمكنك تصميمها كما تريد  من خلال تضمين البيانات داخل html tags طالما أننا نعمل داخل React. حيث يمكنك تهيئة عناصر المصفوفة الخارجة مثلاً لتكون block من عناصر html قبل أن تعمل render لها. 

ثانياً: يجب أن تحتوي الحاوية الرئيسية للعناصر الراجعة من كل دورة من دورات map على attribute تسمى key  تسند له قيمة فريدة من نوعها مثلاً index العنصر داخل المصفوفة أو المعرف الخاص به id حتى تتمكن react من تعقبه في DOM.

بتاريخ 5 دقائق مضت قال Kais Hasan:

إن map هي تابع في javascript يقوم بأخذ كل عنصر من حاوية ما (مثلا list) و تطبيق تابع معين عليها، لصنع حاوية أخرى من نتيجة تطبيق التابع على كل عنصر من الحاوية الأولى.

في مثالك هذا لديك list من الأغراض، و حسب ما يبدو لي فإن كل غرض يمثل نوع معين من الأزهار مع معلومات عنه.

عندما قمت بتطبيق map على هذه ال list فإنك ستقوم بتحويل كل عنصر في ال list عن طريق تابع ستمرره لل map، التابع الذي قمت باستعماله سيأخذ غرض (حيث أن كل عنصر في المصفوفة هي غرض) و في ال javascript يمكننا أخذ خصائص معينة من الغرض باستعمال قوسين {} بالإضافة إلى الخصائص التي نريدها، بالتالي هنا نأخذ الخصائص id,cover,name,water,light، و نقوم ببناء مكون باستعمال قيم هذه الخصائص، أي سيتم إنشاء list جديدة تحوي على نتيجة تطبيق التابع الذي كتبته على كل غرض في ال list الأصلية التي لديك.

 

يعني قمنا بتعويض

plantList.map((plant) => (
	<PlantItem
  		id = plant.id
  		name = plant.name
  		.
  		.
  	/>
))

بتاريخ الآن قال محمود سعداوي:

يعني قمنا بتعويض

plantList.map((plant) => (
	<PlantItem
  		id = plant.id
  		name = plant.name
  		.
  		.
  	/>
))

 

و أين سأضيف key في هذه الحالة

بتاريخ 2 دقائق مضت قال محمود سعداوي:

يعني قمنا بتعويض

plantList.map((plant) => (
	<PlantItem
  		id = plant.id
  		name = plant.name
  		.
  		.
  	/>
))

 

تماماً، لكن أولاً يجب عليك أن تبقي على الأقواس {} عندما تقوم بالإسناد، أي يجب أن تكتب

id = {plant.id}

و هكذا من أجل بقية المتحولات.

ثانياً كما ذكر المدرب علي، هناك بعض التفاصيل التي يجب عليك مراعاتها مثل ال key و أن تضع هذه العناصر ضمن block معين، أي مثلاً مكون div أو Fragment.

بتاريخ الآن قال Kais Hasan:

تماماً، لكن أولاً يجب عليك أن تبقي على الأقواس {} عندما تقوم بالإسناد، أي يجب أن تكتب

id = {plant.id}

و هكذا من أجل بقية المتحولات.

ثانياً كما ذكر المدرب علي، هناك بعض التفاصيل التي يجب عليك مراعاتها مثل ال key و أن تضع هذه العناصر ضمن block معين، أي مثلاً مكون div أو Fragment.

حسنا هل يصح عمل الkey بهذه الطرقة

<PlantItem 
  key = {id}
  id={id}
  cover={cover}
  name={name}
  water={water}
  light={light}
/>

بتاريخ الآن قال محمود سعداوي:

حسنا هل يصح عمل الkey بهذه الطرقة

<PlantItem 
  key = {id}
  id={id}
  cover={cover}
  name={name}
  water={water}
  light={light}
/>

 

مع العلم أن PlantItem هي 

<li key={id} className='lmj-plant-item'>
      <img src={cover} alt={`{name}cover`} className='lmj-plant-item-cover' />
      {name}
	<div>
        <CareScale careType='water' scaleValue={water} />
        <CareScale careType='light' scaleValue={light} />
	</div>
</li>

بتاريخ 2 دقائق مضت قال محمود سعداوي:

حسنا هل يصح عمل الkey بهذه الطرقة

<PlantItem 
  key = {id}
  id={id}
  cover={cover}
  name={name}
  water={water}
  light={light}
/>

 

نعم.

بتاريخ 1 دقيقة مضت قال Kais Hasan:

نعم.

شكرا على التوضيح و المساعدة