React - le composant ne sera pas rendu dans la boucle foreach?

Question

J'ai une petite application lorsque vous ouvrez un onglet que le React Route redirige vers le composant donné (conteneur). Et à partir du conteneur, je veux rendre les composants enfants. J'utilise la boucle foreach pour passer en revue une liste qui a les accessoires qui doivent être donnés à l'enfant. Cependant, l'enfant n'est pas rendu.

Je ne souhaite pas utiliser map car j'utilise des bibliothèques qui dépendent de la classe de la liste.

render() { 
    return ( 
     <div> 
      {this.state.list.ForEach((element) => 
       <ChildComponent childName={element.name} 
     } 
     </div> 
    ); 
} 

}

Answer 1

Vous confondez Array.forEach avec Array.map. forEach ne retourne rien. La manière correcte est:

<div> 
    {this.state.list.map((element, index) => 
     <ChildComponent key={index} childName={element.name} 
    } 
</div> 

mapelement convertit la donnée dans un autre élément, un composant dans ce cas. Le résultat de l'appel map est un tableau de composants qui est ensuite rendu. forEach retourne toujours undefined donc le résultat de votre code est le même que l'écriture:

<div> 
    {undefined} 
</div> 

Notez que key est également nécessaire lors du rendu des listes de composants.