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

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

جافاسكربت:

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'

تأكد من عدم قيامك بعملية ترتيب للمصفوفة

ريأكت:

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>
  );
}

النتيجة:

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

• نزيح العناصر من دليل العنصر المصاف لآخر المصفوفة خطوة لليمين
• نخزن العنصر الجديد في الدليل المطلوب

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/> )
       ^^^^^^^^^^^^

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