Question

我正在尝试从具有嵌入式数组的对象数组中列出数据。在Render中，我可以console.log成功记录数据，但是无法在render.return（）中渲染数据。

样本数据：

[ 
  { module: "Core", roles: ["role1", "role2", "role3"] }, 
  { module: "Asset", roles: ["Role1", "role2", "role3"] }
]

代码是：

      <ListItem>
        {
          (this.modules) && (
            this.modules.map((module, i) => {
              console.log(module.module)
              module.roles.map((role, j)=>{
                console.log(role)
                return (
                  <ListItemText key={j} style={{ padding: 0, margin: 0 }} secondary={module.module + " - " + role} />
                )
              })
            })
          )
        }
      </ListItem>

ListItem和ListItemText是从material-ui导入的

console.log（module.module）显示给我核心与资产

console.log（角色）显示给我角色1 角色2 角色3 角色1 角色2 角色3

这意味着数据将一直可用，直到返回之前。 listItemText应该显示

Core - role1
Core - role2
Core - role3
Asset - role1
Asset - role2
Asset - role3

但是显示空白屏幕

如果我删除module.roles.map（）部分，则listItemText将显示模块名称。

请帮助

Answer 1

您忘记将map方法返回到dom。请在下面找到修改后的解决方案

 <ListItem>
    {
      (this.modules) && (
        this.modules.map((module, i) => {
          console.log(module.module)
          return module.roles.map((role, j)=>{
            console.log(role)
            return (
              <ListItemText key={j} style={{ padding: 0, margin: 0 }} secondary={module.module + " - " + role} />
            )
          })
        })
      )
    }
  </ListItem>

ListItemText不显示数据

1 个答案: