Hoe een geneste array in een reactiecomponent in kaart te brengen

De meeste moderne applicaties gebruiken via API's externe gegevens van andere applicaties en tools. Dit gegevens zijn er in allerlei soorten schema's en het is aan jou om het te deconstrueren totdat je krijgt wat je wilt gebruik. Onder deze schema's bevinden zich gegevensobjecten die geneste arrays bevatten. Het kan een uitdaging zijn om dit soort gegevens weer te geven. In dit artikel leert u hoe u een geneste array in een React-component kunt toewijzen.

De kaartfunctie gebruiken

De functie map loopt over de items van een bepaalde array en retourneert voor elk de opgegeven instructie of code.

Voor een platte array werkt de kaartfunctie als volgt:

constant arr = ['A', 'B', 'C'];
const result1 = arr.map (element => {
opbrengst element;
});

In React moet u de kaartfunctie omwikkelen met accolades en een pijl functie om voor elke iteratie een knooppuntelement te retourneren. De items in de platte array hierboven kunnen als volgt worden weergegeven als JSX-elementen:

constant arr = ['A', 'B', 'C']; 
functieapp () {
opbrengst (
<>
 {arr.map((item, index) => {
<span-sleutel={index}>{A}</span>
 })}
</>
	)
}

Merk op dat u een sleutel toewijst aan elk element dat de kaartfunctie retourneert. Dit helpt React bij het identificeren van items die zijn gewijzigd of verwijderd. Dit is belangrijk tijdens het verzoeningsproces.

Mapping over een geneste array in een reactiecomponent

Een geneste array is vergelijkbaar met een array die een andere array bevat. De volgende receptarray bevat bijvoorbeeld een object met een array.

const recepten = [
 {
 id: 716429,
 titel: "Pasta Met Knoflook, Lente-uitjes, Bloemkool & Paneermeel",
 afbeelding: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 schotelTypes: [
"lunch",
"hoofdgerecht",
"hoofdgerecht",
"diner"
 ],
 recept: {
// receptgegevens
 }
 }
]

Voor gegevens zoals deze met geneste arrays, moet u voor elke array een kaartfunctie gebruiken.

In dit voorbeeld zou u de data-array toewijzen zoals hieronder weergegeven:

exporterenstandaardfunctieRecepten() {
opbrengst (
<div>
 {recepten.map((recept) => {
 opbrengst <div key={recept.id}>
<h1>{recept.titel}</h1>
<img src={recept.image} alt="recept afbeelding" />
 {recept.schotelTypes.map((type, index) => {
 opbrengst <span-sleutel={index}>{type}</span>
 })}
</div>
 })}
</div>
 )
}

De component Recepten zal de div element met de receptgegevens voor elk recept in de receptenmatrix.

Werken met arrays in JavaScript

JavaScript biedt een breed scala aan arraymethoden die het werken met arrays eenvoudiger maken. In dit artikel wordt gedemonstreerd hoe u gegevens uit een geneste array kunt weergeven met behulp van een kaartarray-methode. Naast kaart zijn er ook methoden om u te helpen gegevens naar een array te pushen, twee arrays aaneen te schakelen of zelfs een array te sorteren.