Вложенный цикл для возврата простого ListItem в Reactjs - -Object.values ​​и Object.keys - PullRequest
Новая
       28

Вложенный цикл для возврата простого ListItem в Reactjs - -Object.values ​​и Object.keys

0 голосов
/ 25 октября 2019

Действительно в тупик. Я пытаюсь создать ListItem для каждого ключа каждого значения в массиве объектов. Когда я регистрирую item, он возвращает ключ, который я ищу, в виде строки. Большой! Тем не менее, элементы списка никогда не отображаются на странице. 

return (
 <div>
  <List className="list">
   {Object.values(props.sectionInfo).forEach(section => {
   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>
     )
   });
  })}
  </List>
 </div>
);

console.log(item) //returns "red", "blue"

Ниже приведен список отлично, однако элементы списка являются индексами (0, 1) 

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

Любое пониманиебыло бы полезно.

Ответы [ 3 ]

2 голосов
/ 25 октября 2019

Это потому, что вы используете forEach во внешнем цикле, и он на самом деле ничего не возвращает, поэтому children опора List равна undefined. Попробуйте это: 

return (
 <div>
  <List className="list">
   {Object.values(props.sectionInfo).map(section => {
   return Object.keys(section).map((item, index) => {
    return (
     <ListItem button className='list-item'>
      <ListItemText primary={item} />
     </ListItem>
     )
   });
  })}
  </List>
 </div>
);
0 голосов
/ 25 октября 2019

Вы пытались пройти через Object.values(section) во втором цикле?

Поскольку из вашего второго утверждения кажется, что содержимое проиндексировано как массив. Возможно, вы можете дать больше информации о структуре данных, чтобы помочь вам в дальнейшем.

0 голосов
/ 25 октября 2019

Пожалуйста, попробуйте построить список виртуальных доменов следующим образом: 

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>
);
...