Cum să mapați peste o matrice imbricată într-o componentă React

Cele mai multe aplicații moderne consumă date externe de la alte aplicații și instrumente prin intermediul API-urilor. Acest datele vin în toate tipurile de scheme și depinde de tine să le deconstruiești până când obții ceea ce vrei utilizare. Printre aceste scheme se numără obiectele de date care conțin matrice imbricate. Poate fi dificil să redați acest tip de date. Acest articol vă va învăța cum să mapați peste o matrice imbricată într-o componentă React.

Utilizarea funcției Hartă

Funcția map face bucla peste elementele unui tablou dat și returnează instrucțiunea sau codul specificat pentru fiecare.

Pentru o matrice plată, funcția de hartă funcționează după cum urmează:

const arr = ['A', 'b', 'c'];
const rezultat1 = arr.map (element => {
întoarcere element;
});

În React, trebuie să înfășurați funcția hărții cu paranteze și să utilizați un funcția săgeată pentru a returna un element nod pentru fiecare iterație. Elementele din matricea plată de mai sus pot fi redate ca elemente JSX astfel:

const arr = ['A', 'b', 'c']; 
funcţieApp () {
întoarcere (
<>
 {arr.map((articol, index) => {
<cheie span={index}>{A}</span>
 })}
</>
	)
}

Rețineți că atribuiți o cheie fiecărui element pe care funcția de hartă returnează. Acest lucru îl ajută pe React să identifice elementele care au fost modificate sau eliminate. Acest lucru este important în timpul procesului de reconciliere.

Maparea peste o matrice imbricată într-o componentă React

O matrice imbricată este similară cu o matrice care conține o altă matrice. De exemplu, următorul tablou de rețete conține un obiect cu o matrice.

const retete = [
 {
 ID: 716429,
 titlu: "Paste cu usturoi, ceai verde, conopida & Firimituri de pâine",
 imagine: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 dishTypes: [
"Masa de pranz",
"felul principal",
"felul principal",
"cină"
 ],
 reteta: {
// date rețete
 }
 }
]

Pentru date ca aceasta cu matrice imbricate, ar trebui să utilizați o funcție de hartă pentru fiecare matrice.

În acest exemplu, ați mapa peste matricea de date așa cum se arată mai jos:

exportMod implicitfuncţieRețete() {
întoarcere (
<div>
 {rețete.hartă((rețetă) => {
 întoarcere <cheie div={rețetă.id}>
<h1>{rețetă.titlu}</h1>
<img src={rețetă.imagine} alt="imaginea retetei" />
 {recipe.dishTypes.map((tip, index) => {
 întoarcere <cheie span={index}>{tip}</span>
 })}
</div>
 })}
</div>
 )
}

Componenta Rețete va reda div element care conține datele rețetei pentru fiecare rețetă din matricea de rețete.

Lucrul cu matrice în JavaScript

JavaScript oferă o mare varietate de metode de matrice care simplifică lucrul cu matrice. Acest articol a demonstrat cum să redați date dintr-o matrice imbricată folosind o metodă de matrice de hartă. În afară de hartă, există și metode care vă ajută să împingeți datele într-o matrice, să concatenați două matrice sau chiar să sortați o matrice.