Question

我无法弄清楚我的第一层和第二层是如何正确映射的，但是我的第三层给了我一个错误。我可以借一双新眼睛吗？我做错了什么？

以下是我的数据样本（json）

exports.LicenseItems = [
    { 
        id: 100, 
        network_name: "scala", 
        licenseProperties: [
            { id: 101, name: "Item 1: ", value: " Value 1" },
            { id: 102, name: "Item 2 ", value: " Value 2" },
            { id: 103, name: "Item 3 ", value: " Value 3" },
            { 
                id: 104, 
                name: "Item 4", 
                Licenses: [
                    {id: 1041, name: "SubItem 4.1", value: " SubValue 1"},
                    {id: 1042, name: "SubItem 4.2", value: " SubValue 2"},
                    {id: 1043, name: "SubItem 4.3", value: " SubValue 3"},
                ],
            },
            { 
                id: 105, 
                name: "Item 5", 
                Licenses: [
                    {id: 1051, name: "SubItem 5.1", value: " SubValue 1"},
                    {id: 1052, name: "SubItem 5.2", value: " SubValue 1"},
                    {id: 1053, name: "SubItem 5.3", value: " SubValue 1"},
                ],
            },
            { id: 106, name: "Item 6", value: " Value 6" },
            { id: 107, name: "Item 7", value: " Value 7" },
            { id: 108, name: "Item 8", value: " Value 8" },
        ],
    },
    {...},
    {...},
];

这是我在ReactJS中的映射脚本

{LicenseItems.map((item, index) => (
    <Grid item xs={12} style={{padding: 0}} key={index}>
        <ListItem 
            divider 
            button
            onClick={this.handleClick}>
            <ListItemText primary={<CMLabel>{item.network_name}</CMLabel>}/>
            <IconButton>
                <Icon>{this.state.open ? 'expand_more' : 'expand_less'}</Icon>
            </IconButton>
        </ListItem> 
        <Collapse
            in={!this.state.open} 
            timeout="auto" 
            unmountOnExit
            className={classes.submenu}>
            <List component="div" disablePadding>
                {item.licenseProperties.map((properties, propertyIndex) => (
                    <ListItem key={propertyIndex}>
                        <ListItemText
                            primary={
                                <span>
                                    <CMLabel>{properties.name}</CMLabel> {properties.value}
                                    <div className={classes.subdueList}>
                                        {properties.Licenses.map((row, featuredIndex) => (
                                            <span key={featuredIndex}>
                                                <CMLabel>{row.name}</CMLabel> {row.value}
                                            </span>
                                        ))}
                                    </div>
                                </span>
                            } 
                        />
                    </ListItem> 
                ))}
            </List>
        </Collapse> 
    </Grid>
))}

我的输出呈现第一级（LicenseItems）和第二级（licenseProperties）。但是thrid映射级别（Licenses）不会呈现并给我这个错误

未捕获（承诺）TypeError：无法读取未定义
的属性“map”

查看图片以获得一些视觉帮助

先谢谢你们！

Answer 1

在您的代码中，在此行：

{properties.Licenses.map((row, featuredIndex)

在某些数据中，属性对象没有Licenses字段，因此您收到此错误。

您可以在首先映射之前检查它是否存在，例如

<div className={classes.subdueList}>
  {properties.Licenses!=null ? properties.Licenses.map((row, featuredIndex) => (
    <span key={featuredIndex}>
      <CMLabel>{row.name}</CMLabel> {row.value}
    </span>
  )):<div/>}
</div>

在ReactJS中映射多层嵌套数据

1 个答案: