Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.
Научите како да решите угнежђени објекат низа користећи ЈаваСцрипт функцију мапе.
Већина модерних апликација користи екстерне податке из других апликација и алата преко АПИ-ја. Ово подаци долазе у свим врстама шема, а на вама је да их деконструишете док не добијете оно што желите користити. Међу овим шемама су објекти података који садрже угнежђене низове. Може бити изазовно приказати ову врсту података. Овај чланак ће вас научити како да мапирате угнежђени низ у Реацт компоненти.
Коришћење функције мапе
Функција мап прелази у петљу преко ставки датог низа и враћа наведену изјаву или код за сваку.
За раван низ, функција мапе ради на следећи начин:
цонст арр = ['а', 'б', 'ц'];
конст резултат1 = арр.мап (елемент => {
повратак елемент;
});
У Реацт-у морате умотати функцију мапе са витичастим заградама и користити
функција стрелице да врати елемент чвора за сваку итерацију. Ставке у равном низу изнад могу се приказати као ЈСКС елементи овако:цонст арр = ['а', 'б', 'ц'];
функцијаАпликација () {
повратак (
<>
{арр.мап((ставка, индекс) => {
<спан кеи={индек}>{а}</span>
})}
</>
)
}
Имајте на уму да додељујете кључ сваком елементу који функција мапе враћа. Ово помаже Реацт-у да идентификује ставке које су промењене или уклоњене. Ово је важно током процеса помирења.
Мапирање преко угнежђеног низа у Реацт компоненти
Угнежђени низ је сличан низу који садржи други низ. На пример, следећи низ рецепата садржи објекат са низом.
конст рецепти = [
{
ид: 716429,
наслов: "Тестенина са белим луком, луком, карфиолом & Хлебне мрвице",
слика: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
ДисхТипес: [
"ручак",
"главно јело",
"главно јело",
"вечера"
],
рецепт: {
// подаци о рецепту
}
}
]
За податке попут овог са угнежђеним низовима, требало би да користите функцију мапе за сваки низ.
У овом примеру, мапирали бисте низ података као што је приказано у наставку:
извозУобичајенофункцијаРецепти() {
повратак (
<див>
{рецепти.мапа((рецепт) => {
повратак <див кључ={реципе.ид}>
<х1>{реципе.титле}</h1>
<имг срц={реципе.имаге} алт="слика рецепта" />
{реципе.дисхТипес.мап((тип, индекс) => {
повратак <спан кеи={индек}>{тип}</span>
})}
</div>
})}
</div>
)
}
Компонента Рецепти ће приказати див елемент који садржи податке о рецепту за сваки рецепт у низу рецепата.
Рад са низовима у ЈаваСцрипт-у
ЈаваСцрипт нуди широк избор метода низова који чине рад са низовима једноставнијим. Овај чланак је показао како да прикажете податке из угнежђеног низа користећи метод низа мапа. Осим мапе, постоје и методе које вам помажу да гурнете податке у низ, спојите два низа или чак сортирате низ.