Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Apprenez à résoudre un objet tableau imbriqué à l'aide de la fonction map de JavaScript.
La plupart des applications modernes consomment des données externes provenant d'autres applications et outils via des API. Ce les données viennent dans tous les types de schémas, et c'est à vous de les déconstruire jusqu'à ce que vous obteniez ce que vous voulez utiliser. Parmi ces schémas se trouvent des objets de données qui contiennent des tableaux imbriqués. Il peut être difficile de rendre ce type de données. Cet article vous apprendra comment mapper sur un tableau imbriqué dans un composant React.
Utilisation de la fonction Carte
La fonction map effectue une boucle sur les éléments d'un tableau donné et renvoie l'instruction ou le code spécifié pour chacun.
Pour un tableau plat, la fonction map fonctionne comme suit :
const arr = ['un', 'b', 'c'];
constante result1 = arr.map (element => {
retour élément;
});
Dans React, vous devez envelopper la fonction map avec des accolades et utiliser un fonction flèche pour retourner un élément de nœud pour chaque itération. Les éléments du tableau plat ci-dessus peuvent être rendus sous forme d'éléments JSX comme ceci :
const arr = ['un', 'b', 'c'];
fonctionApplication () {
retour (
<>
{arr.map((item, index) => {
<clé d'étendue={index}>{un}</span>
})}
</>
)
}
Notez que vous affectez une clé à chaque élément renvoyé par la fonction map. Cela aide React à identifier les éléments qui ont été modifiés ou supprimés. Ceci est important pendant le processus de réconciliation.
Mappage sur un tableau imbriqué dans un composant React
Un tableau imbriqué est similaire à un tableau qui contient un autre tableau. Par exemple, le tableau de recette suivant contient un objet avec un tableau.
constante recettes = [
{
identifiant: 716429,
titre: "Pâtes à l'ail, oignons verts, chou-fleur & Chapelure",
image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
Types de plats: [
"déjeuner",
"plat principal",
"plat principal",
"dîner"
],
recette: {
// données de recette
}
}
]
Pour des données comme celle-ci avec des tableaux imbriqués, vous devez utiliser une fonction map pour chaque tableau.
Dans cet exemple, vous mapperez sur le tableau de données comme indiqué ci-dessous :
exporterdéfautfonctionRecettes() {
retour (
<div>
{recettes.map((recette) => {
retour <clé div={recette.id}>
<h1>{recette.titre}</h1>
<img src={recette.image} alt="image de la recette" />
{recipe.dishTypes.map((type, indice) => {
retour <clé d'étendue={index}>{taper}</span>
})}
</div>
})}
</div>
)
}
Le composant Recettes rendra le div élément contenant les données de recette pour chaque recette dans le tableau de recettes.
Travailler avec des tableaux en JavaScript
JavaScript offre une grande variété de méthodes de tableau qui simplifient le travail avec les tableaux. Cet article a montré comment restituer des données à partir d'un tableau imbriqué à l'aide d'une méthode de tableau de carte. Outre la carte, il existe également des méthodes pour vous aider à envoyer des données dans un tableau, à concaténer deux tableaux ou même à trier un tableau.
