Возвращение кошмара с .map () внутри .map ()

Question

Я был в этом некоторое время. У меня есть вложенная навигация json, которую я использую. Навигация верхнего уровня загружается нормально (nav.map), как только я двигаюсь дальше вниз по кроличьей норе, я обнаруживаю, что не возвращаю верхний уровень или навигацию подуровня. Все успешно компилируется. Я просто скучаю по нему?

return(
 <List component="nav" className={classes.root}>
   {nav.map(function(element) {
     <ListItem
       button
       onClick={handleClick}
       id={element.toplevel}
       key={element.toplevel}
     >
       <ListItemText primary={element.toplevel} />
       {open ? <ExpandLess /> : <ExpandMore />}
     </ListItem>;
     return element.children.map(function(child) {
       return (
         <Collapse timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             <ListItem button className={classes.nested}>
               <ListItemIcon>
                 <StarBorder />
               </ListItemIcon>
               <ListItemText primary={child.name} />
             </ListItem>
           </List>
         </Collapse>
       );
     });
   })}
 </List>
);

Answer 1

Попробуйте, я немного изменил структуру.

 <List component="nav" className={classes.root}>
   {nav.map(function(element) {
     return(
     <ListItem
       button
       onClick={handleClick}
       id={element.toplevel}
       key={element.toplevel}
     >
       <ListItemText primary={element.toplevel} />
       {open ? <ExpandLess /> : <ExpandMore />}
     </ListItem>
     {element.children.map(function(child) {
       return (
         <Collapse timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             <ListItem button className={classes.nested}>
               <ListItemIcon>
                 <StarBorder />
               </ListItemIcon>
               <ListItemText primary={child.name} />
             </ListItem>
           </List>
         </Collapse>
       )
     })
    }
   }))}
 </List>
);

Answer 2

Убедитесь, что ваши функции обратного вызова карты действительно возвращают код jsx. Ваши операторы возврата не установлены правильно.

Одним из способов, который обычно используется в реагирующей земле, чтобы сделать код jsx более читабельным, является синтаксис функции стрелки. Таким образом вы избавляетесь от операторов return и возвращаете все тело функции (это просто syntacti c sugar).

Следующая вещь: помните о ваших закрывающих тегах. Я просто предположил, что ваш элемент списка объекта элемента закрывается после тега ListItemText и что ваша вторая функция карты открывает новый элемент списка после вашего элемента ListItem. jsx позволяет вам возвращать только один тег root за раз. Вот почему (как указано в приведенном ниже комментарии) использование пустой пары тегов <> ... </> в качестве элемента root решит эту проблему.

return (
    <List component="nav" className={classes.root}>
      {data.nav.map((element) => (
        <>
        <ListItem
          button
          onClick={handleClick}
          id={element.toplevel}
          key={element.toplevel}
        >
          <ListItemText primary={element.toplevel} />
          {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        {
          element.children.map((child) => (
              <Collapse timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                  <ListItem button className={classes.nested}>
                    <ListItemIcon>
                      <StarBorder />
                    </ListItemIcon>
                    <ListItemText primary={child.name} />
                  </ListItem>
                </List>
              </Collapse>
          ))
        }
      </>
      ))}
    </List>
  );

Ссылка в песочнице: https://codesandbox.io/s/material-demo-uv7c7?fontsize=14&hidenavigation=1&theme=dark