اذهب إلى المحتوى
  • 0

ريأكت: ادراج عنصر في مصوفة عند فهرس محدد، واجراء حلقة map على مكون ريأكت

شادي جـ

السؤال

أحاول إجراء حلقة  map (loop)  من خلال مصفوفة array لتوليد عدة مكونات، ومن ثم إدراج مكون عن طريق ادرج قيمة في المصفوفة عند فهرس محدد، باستخدام دالة array.splice المشكلة تمكن في أنه أثناء عملية التصيير، يتم إضافة المكون في الأخير، بينما العنصر في المصفوفة هو في فهرس محدد. 
على سبيل المثال: 
لدي مصفوفة كالتالي: 
 

const array = ['عنصر 3', 'عنصر2', 'عنصر1'];

عندما ادرج عنصر جديد لنقل على سبيل المثال في الفهرس 2 عن طريق array.splice كالتالي:
 

array.splice(2, 0, "عنصر جديد");

تكون النتيجة كالتالي:
 

//النتيجة: ['عنصر 3', 'عنصر2 ',عنصر جديد', 'عنصر1']

وهذا هو المطلوب، لكن حينما يتم تصيير المكون عبر حلقة  map الترتيب يختلف:
 

return array.map((content, index) => <li key={index}>{content}<li/> )


//بعد التصيير: 
//عنصر1
//عنصر2
//عنصر3
//عنصر جديد

إذ نلاحظ أن الترتيب قد اختلف عن ترتيب المصفوفة، 
ما السبب؟ وما الحل؟

تم التعديل في بواسطة Eiji Nite
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لقد جربت الشيفرة في المتصفح وتم المرور على العناصر بالترتيب الصحيح:

جافاسكربت:

const array = ['1','2','3'];

array.splice(2, 0, "4");   // ['1', '2', '4', '3']


array.map((content, index) => console.log(index,content) )

0 '1'
1 '2'
2 '4'
3 '3'

تأكد من عدم قيامك بعملية ترتيب للمصفوفةjs-splice.jpg.4a0e40073754f6d289f469c6beb5d31f.jpg

ريأكت:

import React from "react";
import "./styles.css";

export default function App() {
  const array = ['1', '2', '3'];
  array.splice(2, 0, "4");

  return (
    <ul>
      {array.map((content, index) =>
        <li key={index}> {content} </li>
      )}
    </ul>
  );
}

النتيجة:

react-splice.jpg.494dc110856267b5db78713487a71cb7.jpg

إن بقيت المشكلة، يمكنك حشر العنصر يدوياً باستخدام المنطق التالي:

  • نزيح العناصر من دليل العنصر المصاف لآخر المصفوفة خطوة لليمين
  • نخزن العنصر الجديد في الدليل المطلوب
function insertElement(newElement, index) {

  for (i = arr.length; i > index; i--) {
    arr[i] = arr[i - 1];
  }
  
  arr[index] = newElement;

}

يمكنك تجريب إعادة نشر المصفوفة قبل المرور عليها لتوزيع المفاتيح من جديد

return [...array].map((content, index) => <li key={index}>{content}<li/> )
       ^^^^^^^^^^^^

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كلامك مضبوط، ليس هنالك خلال. لقد جربته في codesandbox وكل شيء يعمل، لكن لسبب ما. لا يعمل في مشروعي. لا استطيع شرح المشكلة أكثر. لكن يبدو لي أن هنالك خلل كبير في الأساس الذي بنيت عليه، بيحث لم يعد ريأكت يعمل بالشكل الصحيح. كان ينبغي عليّ التحقق من العملية خارج مشروعي في codesandbox قبل طرح السؤال.

 

تم التعديل في بواسطة Eiji Nite
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...