Comment restituer un tableau d'objets dans 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>

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>

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!