شادي جـ

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

أحاول إجراء حلقة 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 //عنصر جديد إذ نلاحظ أن الترتيب قد اختلف عن ترتيب المصفوفة، ما السبب؟ وما الحل؟