遍历数组并为每个项目创建一个 ListItem答案

【问题标题】：Loop through array and create a ListItem for each item遍历数组并为每个项目创建一个 ListItem
【发布时间】：2020-06-18 16:47:11
【问题描述】：

我正在尝试遍历在命名工具中传递的数组，并根据其属性为列表中的每个项目创建一个 ListItem。目前我所显示的只是我的 ListSubheader。无按钮显示。我想确认我的问题就在这里，而不是传下来的问题。

工具看起来像：

[
   {
      icon: PropTypes.object.isRequired,
      text: PropTypes.string.isRequired,
      route: PropTypes.string.isRequired 
   }, ...
]

我的代码如下：

const ToolSidebar = ({ sidebarTitle, tools }) => {
  return (
    <Fragment>
      <List subheader={<ListSubheader>{sidebarTitle}</ListSubheader>}>
        {tools.forEach(tool => {
          return (
            <ListItem button href={tool.route}>
              <ListItemIcon>{tool.icon}</ListItemIcon>
              <ListItemText primary={tool.text} />
            </ListItem>
          );
        })}
      </List>
    </Fragment>
  );
};

更新：对于任何可能偶然发现此答案的人，虽然与问题无关，但您仍然会收到错误消息。而不是：

<ListItemIcon>{tool.icon}</ListItemIcon>

使用

<ListItemIcon> <SvgIcon component={tool.icon} /> </ListItemIcon>

【问题讨论】：

标签： arrays reactjs material-ui

【解决方案1】：

您应该使用Array.prototype.map 而不是Array.prototype.forEach。

{tools.map(tool => {
     return (
        <ListItem button href={tool.route}>
           <ListItemIcon>{tool.icon}</ListItemIcon>
           <ListItemText primary={tool.text} />
        </ListItem>
    );
  })}
}

【讨论】：

我很高兴它有帮助。