在ReactJS中映射多层嵌套数据
在ReactJS中映射多层嵌套数据
提问于 2018-06-06 02:11:26
我不知道我的第一层和第二层是如何正确映射的，但是我的第三层给了我一个错误。我能借一双新的眼睛吗？我做错了什么？
以下是我的数据示例(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)。但是第三个映射级别(许可证)没有呈现，并给出了这个错误
未捕获(in promise)映射:无法读取未定义的属性‘TypeError’
有关视觉帮助，请参阅该图像
提前感谢，伙计们！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-06 04:22:59
在您的代码中，在下面这一行：
{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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50706445
复制相关文章
相似问题