Question

我正在尝试使用map通过嵌套的Array JSX。

这里是Array：

    this.topics = [

        {
            id: 1,
            name: 'first',
            headings : [
                {
                    id: 1,
                    url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
                    name: 'Sintel movie'
                },
                {
                    id: 2,
                    url: 'https://media.w3.org/2010/05/bunny/movie.mp4',
                    name: 'Bunny Movie'
                },
                {
                    id: 3,
                    url: 'https://techslides.com/demos/sample-videos/small.mp4',
                    name: 'Test page'
                }
            ]
        },

        {
            id: 2,
            name: 'second',
            headings : [
                {
                    id: 1,
                    url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
                    name: 'Siddntel movie'
                },
                {
                    id: 2,
                    url: 'https://media.w3.org/2010/05/bunny/movie.mp4',
                    name: 'Bunnddy Movie'
                },
                {
                    id: 3,
                    url: 'https://techslides.com/demos/sample-videos/small.mp4',
                    name: 'Test ddpage'
                }
            ]
        }
    ];

以及到目前为止我提出的JSX代码：

  renderSidenav(){
      return(
          <Nav>
              {this.topics.map(topic =>
                  <Dropdown eventKey="3" title="s" icon={<Icon icon="magic" />}>
                      {this.topics[topic].headings.map(heading =>
                          <div onClick = {() => this.handleSelect(heading.id)} key={heading.id}>
                              <Dropdown.Item style={{backgroundColor: '#E9F4E4'}} icon={<Icon icon="dashboard"/>}>
                                  <div>{heading.name}</div>
                              </Dropdown.Item>
                              <Dropdown.Item divider style={{backgroundColor: 'white', height: '2px'}}/>
                          </div>
                    )}
                  </Dropdown>
                )}
         </Nav>
      )
  }

这是我得到的错误：

TypeError: Cannot read property 'headings' of undefined

我在做什么错了？

Answer 1

只需topic.headings.map而不是this.topics[topic].headings.map。

地图函数返回项目，而不是数组中的位置/索引，因此您可以直接从topic调用它。

Answer 2

使用this.topics[topic].headings.map(...)代替topic.headings.map(...)

这是因为.map()返回一个对象，并且尝试通过topics[topic]将该对象用作索引会给您undefined。

使用JSX通过数组进行映射

2 个答案: