Ինչպես քարտեզագրել Nested Array-ը React բաղադրիչում

Իմացեք, թե ինչպես լուծել ներկառուցված զանգվածի օբյեկտը՝ օգտագործելով JavaScript-ի քարտեզի գործառույթը:

Ժամանակակից հավելվածների մեծ մասը API-ների միջոցով օգտագործում է արտաքին տվյալներ այլ հավելվածներից և գործիքներից: Այս տվյալները ներկայացված են բոլոր տեսակի սխեմաներով, և դա ձեզնից է կախված՝ ապակառուցեք դրանք, մինչև ստանաք այն, ինչ ցանկանում եք օգտագործել: Այս սխեմաների թվում են տվյալների օբյեկտները, որոնք պարունակում են ներդիր զանգվածներ: Այս տեսակի տվյալների մատուցումը կարող է դժվար լինել: Այս հոդվածը կսովորեցնի ձեզ, թե ինչպես պետք է քարտեզագրել React բաղադրիչի մեջ տեղադրված զանգվածը:

Օգտագործելով քարտեզի գործառույթը

Քարտեզի ֆունկցիան պտտվում է տվյալ զանգվածի տարրերի վրա և վերադարձնում յուրաքանչյուրի համար նշված հայտարարությունը կամ կոդը:

Հարթ զանգվածի համար քարտեզի ֆունկցիան աշխատում է հետևյալ կերպ.

const arr = ['a', 'b', 'c'];
const result1 = arr.map(element => {
  return element;
});

React-ում դուք պետք է փաթաթեք քարտեզի գործառույթը գանգուր փակագծերով և օգտագործեք սլաքների ֆունկցիան՝ յուրաքանչյուր կրկնության համար հանգույցի տարր վերադարձնելու համար: Վերևում գտնվող հարթ զանգվածի տարրերը կարող են ներկայացվել որպես JSX տարրեր հետևյալ կերպ.

const arr = ['a', 'b', 'c']; 
function App () {
 return (
 <>
 {arr.map((item, index) => {
 <span key={index}>{a}</span>
 })}
 </>
 )
}

Նկատի ունեցեք, որ քարտեզի գործառույթը վերադարձնող յուրաքանչյուր տարրի բանալին եք հատկացնում: Սա օգնում է React-ին բացահայտել այն տարրերը, որոնք փոխվել կամ հեռացվել են: Սա կարևոր է հաշտեցման գործընթացում:

Քարտեզագրում Nested Array-ի վրա React բաղադրիչում

Ներդրված զանգվածը նման է զանգվածին, որը պարունակում է մեկ այլ զանգված: Օրինակ, հետևյալ բաղադրատոմսերի զանգվածը պարունակում է զանգվածով առարկա։

const recipes = [
    {
        id: 716429,
        title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
        image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
        dishTypes: [
            "lunch",
            "main course",
            "main dish",
            "dinner"
        ],
        recipe: {
            // recipe data
        }
    }
    
]

Ներդրված զանգվածներով նման տվյալների համար դուք պետք է օգտագործեք քարտեզի ֆունկցիա յուրաքանչյուր զանգվածի համար:

Այս օրինակում դուք պետք է քարտեզագրեք տվյալների զանգվածի վրա, ինչպես ցույց է տրված ստորև.

export default function Recipes() {
    return (
        <div>
            {recipes.map((recipe) => {
                return <div key={recipe.id}>
                    <h1>{recipe.title}</h1>
                    <img src={recipe.image} alt="recipe image" />
                    {recipe.dishTypes.map((type, index) => {
                        return <span key={index}>{type}</span>
                    })}
                </div>
            })}
        </div>
    )
}

Recipes բաղադրիչը կարտացոլի div տարրը, որը պարունակում է բաղադրատոմսերի տվյալներ բաղադրատոմսերի զանգվածի յուրաքանչյուր բաղադրատոմսի համար:

JavaScript-ում զանգվածների հետ աշխատելը

JavaScript-ն առաջարկում է զանգվածային մեթոդների լայն տեսականի, որոնք հեշտացնում են զանգվածների հետ աշխատանքը: Այս հոդվածը ցույց տվեց, թե ինչպես կարելի է տվյալների արտապատկերում ներդիր զանգվածից՝ օգտագործելով քարտեզի զանգվածի մեթոդը: Բացի քարտեզից, կան նաև մեթոդներ, որոնք կօգնեն ձեզ տվյալները մղել զանգվածին, միացնել երկու զանգված կամ նույնիսկ տեսակավորել զանգվածը: