时间戳

首页 > 解决方案 > 在 .map() 中使用 .map() 返回噩梦

javascript - 在 .map() 中使用 .map() 返回噩梦

问题描述

我已经有一段时间了。所以我有一些我正在使用的嵌套导航 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>
);

标签： javascriptreactjsjsx

解决方案

确保您的地图回调函数实际返回 jsx 代码。您的退货声明设置不正确。

react-land 中常用的一种使 jsx 代码更具可读性的方法是箭头函数语法。这样您就可以摆脱 return 语句并返回整个函数体（它只是语法糖）。

下一件事：注意你的结束标签。我只是假设元素对象的列表项在 ListItemText 标记之后关闭，并且您的第二个映射函数在元素 ListItem 之后打开一个新列表项。jsx 一次只允许你返回一个根标签。这就是为什么（正如下面的评论所建议的）使用空<> ... </>标签对作为根元素将解决这个问题。

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

推荐阅读