Отображение нескольких слоев вложенных данных в ReactJS

LOTUSMS спросил: 12 мая 2018 в 04:31 в: 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). Но уровень thrid mapping (Licenses) не является рендерингом и не дает мне эту ошибку.

Невозможно (в обещании) TypeError: Невозможно прочитать свойство "map" неопределенного

См. изображение для некоторой визуальной справки.

Спасибо заранее, ребята!

1 ответ

Есть решение
Chetan Jadhav CD ответил: 12 мая 2018 в 06:42

В вашем коде в этой строке:

{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>
LOTUSMS ответил: 12 мая 2018 в 07:42
Ты спасатель! Большое спасибо, мой друг.