Maison > interface Web > js tutoriel > le corps du texte

Comment restituer un tableau d'objets dans React ?

Linda Hamilton
Libérer: 2024-11-06 07:49:02
original
550 Les gens l'ont consulté

How to Render an Array of Objects in React?

Rendu d'un tableau d'objets dans React

La requête démontre une tentative de rendu d'une liste d'objets dans React. Cependant, il manque l'instruction return nécessaire dans la méthode render(). Abordons ce problème et proposons une solution complète :

Solution :

Pour restituer un tableau d'objets dans React, il existe deux approches :

Méthode 1 :Stocker la sortie dans une variable

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
}</code>
Copier après la connexion

Méthode 2 :Écrivez directement la fonction map dans le retour

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
}</code>
Copier après la connexion

Dans dans les deux méthodes, les données sont mappées à une liste d’éléments. Chaque élément se voit attribuer un accessoire clé unique, comme l'exige React. Cette clé garantit un rendu efficace et conserve l'identité de chaque élément de la liste.

Ces solutions offrent un moyen fiable et flexible de restituer des tableaux d'objets dans React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!