I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Scopri come risolvere un oggetto array nidificato utilizzando la funzione map di JavaScript.
La maggior parte delle applicazioni moderne consuma dati esterni da altre applicazioni e strumenti tramite le API. Questo i dati sono disponibili in tutti i tipi di schemi e sta a te decostruirli finché non ottieni ciò che desideri utilizzo. Tra questi schemi ci sono gli oggetti dati che contengono array nidificati. Può essere difficile eseguire il rendering di questo tipo di dati. Questo articolo ti insegnerà come mappare un array nidificato in un componente React.
Utilizzo della funzione mappa
La funzione map esegue un ciclo sugli elementi di un determinato array e restituisce l'istruzione o il codice specificato per ciascuno.
Per un array piatto, la funzione map funziona come segue:
const arr = ['UN', 'B', 'C'];
cost risultato1 = arr.map (elemento => {
ritorno elemento;
});
In React, devi racchiudere la funzione map tra parentesi graffe e utilizzare un funzione freccia per restituire un elemento nodo per ogni iterazione. Gli elementi nell'array piatto sopra possono essere visualizzati come elementi JSX come questo:
const arr = ['UN', 'B', 'C'];
funzioneApp () {
ritorno (
<>
{arr.map((elemento, indice) => {
<chiave span={indice}>{UN}</span>
})}
</>
)
}
Si noti che si assegna una chiave a ogni elemento restituito dalla funzione map. Questo aiuta React a identificare gli elementi che sono stati modificati o rimossi. Questo è importante durante il processo di riconciliazione.
Mappatura su un array annidato in un componente React
Un array annidato è simile a un array che contiene un altro array. Ad esempio, il seguente array della ricetta contiene un oggetto con un array.
cost ricette = [
{
id: 716429,
titolo: "Pasta con aglio, scalogno, cavolfiore & Briciole di pane",
Immagine: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
piattoTipi: [
"pranzo",
"portata principale",
"piatto principale",
"cena"
],
ricetta: {
// dati della ricetta
}
}
]
Per dati come questo con array nidificati, dovresti usare una funzione map per ogni array.
In questo esempio, eseguiresti la mappatura dell'array di dati come mostrato di seguito:
esportarepredefinitofunzioneRicette() {
ritorno (
<div>
{ricette.map((ricetta) => {
ritorno <chiave div={recipe.id}>
<h1>{ricetta.titolo}</h1>
<img src={ricetta.immagine} alt="immagine della ricetta" />
{recipe.dishTypes.map((tipo, indice) => {
ritorno <chiave span={indice}>{tipo}</span>
})}
</div>
})}
</div>
)
}
Il componente Recipes eseguirà il rendering del file div elemento contenente i dati della ricetta per ogni ricetta nell'array ricette.
Lavorare con gli array in JavaScript
JavaScript offre un'ampia varietà di metodi di matrice che semplificano il lavoro con le matrici. Questo articolo ha illustrato come eseguire il rendering dei dati da un array annidato usando un metodo di array map. Oltre alla mappa, ci sono anche metodi per aiutarti a inviare dati a un array, concatenare due array o persino ordinare un array.
