كيفية رسم خريطة على مصفوفة متداخلة في مكون React

تستهلك معظم التطبيقات الحديثة البيانات الخارجية من التطبيقات والأدوات الأخرى من خلال واجهات برمجة التطبيقات. هذا تأتي البيانات في جميع أنواع المخططات ، والأمر متروك لك لتفكيكها حتى تحصل على ما تريد يستخدم. من بين هذه المخططات كائنات البيانات التي تحتوي على مصفوفات متداخلة. قد يكون من الصعب تقديم هذا النوع من البيانات. ستعلمك هذه المقالة كيفية التعيين عبر مصفوفة متداخلة في مكون React.

استخدام وظيفة الخريطة

تدور وظيفة map فوق عناصر مصفوفة معينة وترجع العبارة أو الرمز المحدد لكل منها.

بالنسبة للصفيف المسطح ، تعمل وظيفة الخريطة على النحو التالي:

const arr = ['أ', 'ب', 'ج'];
مقدار ثابت نتيجة 1 = خريطة arr.map (عنصر => {
يعود عنصر؛
});

في React ، يجب عليك التفاف دالة الخريطة بأقواس معقوفة واستخدام امتداد وظيفة السهم لإرجاع عنصر عقدة لكل تكرار. يمكن تقديم العناصر الموجودة في المصفوفة المسطحة أعلاه كعناصر JSX مثل هذا:

const arr = ['أ', 'ب', 'ج']; 
وظيفةبرنامج () {
يعود (
<>
 {arr.map ((item، index) => {
<مفتاح الامتداد = {index}>{أ}</span>
 })}
</>
	)
}

لاحظ أنك تقوم بتعيين مفتاح لكل عنصر تقوم وظيفة الخريطة بإرجاعه. يساعد هذا React في تحديد العناصر التي تم تغييرها أو إزالتها. هذا مهم أثناء عملية المصالحة.

رسم الخرائط على مصفوفة متداخلة في مكون React

المصفوفة المتداخلة تشبه المصفوفة التي تحتوي على مصفوفة أخرى. على سبيل المثال ، تحتوي مصفوفة الوصفة التالية على كائن به مصفوفة.

مقدار ثابت وصفات = [
 {
 المعرف: 716429،
 عنوان: "مكرونة بالثوم والبصل الأخضر والقرنبيط & فتات الخبز",
 صورة: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 أنواع الأطباق: [
"غداء",
"الطبق الرئيسي",
"الطبق الرئيسي",
"عشاء"
 ],
 وصفة: {
// وصفة البيانات
 }
 }
]

لمثل هذه البيانات مع المصفوفات المتداخلة ، يجب عليك استخدام دالة الخريطة لكل مصفوفة.

في هذا المثال ، ستقوم بالتعيين عبر مصفوفة البيانات كما هو موضح أدناه:

يصدّرتقصيروظيفةوصفات() {
يعود (
<شعبة>
 {recipes.map ((recipe) => {
 يعود <مفتاح div = {recipe.id}>
<h1>{recipe.title}</h1>
<img src = {recipe.image} alt ="صورة الوصفة" />
 {recipe.dishTypes.map ((type، index) => {
 يعود <مفتاح الامتداد = {index}>{يكتب}</span>
 })}
</div>
 })}
</div>
 )
}

سيقوم المكون Recipes بعرض ملف شعبة يحتوي على بيانات الوصفة لكل وصفة في مصفوفة الوصفات.

العمل مع المصفوفات في JavaScript

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