arrays - 使用 JSX 映射数组

Question

我正在尝试map通过嵌套Arrayusing 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

我究竟做错了什么？

标签： arraysreactjsjsx

Answer 1

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

Map 函数返回项目，而不是数组中的位置/索引，因此您可以直接从topic.