0
votes

Boucle imbriquée pour retourner simple liste de réactjs - -Object.values ​​et objet.keys

vraiment soulevé. J'essaie de créer un listitem code> pour chaque touche de chaque valeur dans un tableau d'objets. Lorsque je me connecte élément code>, il renvoie la clé que je recherche comme une chaîne. Génial! Cependant, les éléments de la liste ne rendent jamais sur la page.

return (
 <div>
  <List className="list">
   {Object.keys(props.sectionInfo).map((section, index) => {
    return (
     <ListItem button className='list-item'>
      <ListItemText primary={section} />
     </ListItem>
    )
   })}
  </List>
 </div>
);


0 commentaires

3 Réponses :


1
votes

S'il vous plaît essayer de créer une liste de DOMA virtuelles comme suit:

let items = []
Object.values(props.sectionInfo).forEach(section => {
   let subItems = Object.keys(section).map((item, index) => {
    return (
     <ListItem button className='list-item'> //doesn't render, but also doesn't throw errors
      <ListItemText primary={item} />
     </ListItem>
     )
   });

   items = items.concat(subItems);
  })

return (
 <div>
  <List className="list">
   {items}
  </List>
 </div>
);


0 commentaires

0
votes

Avez-vous essayé de traverser objet.values ​​(section) dans la seconde boucle?

Parce que de votre deuxième déclaration, il semble que le contenu soit indexé comme une matrice. Peut-être que vous pouvez donner plus d'informations sur la structure de données pour vous aider davantage.


0 commentaires

3
votes

Ceci est dû au fait que vous utilisez le foreach dans la boucle extérieure et que cela ne renvoie rien réellement, donc les enfants prop de la liste est non défini . Essayez ceci: xxx


0 commentaires