在ReactJS中映射多层嵌套数据

我不知道我的第一层和第二层是如何正确映射的,但我的第三层给了我一个错误。我能借一双新眼睛吗?我做错了什么?

以下是我的数据示例(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)。但是第三个映射级别(许可证)没有呈现,并且给了我这个错误

未捕获(承诺中)TypeError:无法读取未定义的属性“map”

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

提前谢谢大家!