Arrays 使用JSX通过数组进行映射

我正在尝试使用

JSX

通过嵌套的

数组
映射

这是
数组
：

    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>
      )
  }

我做错了什么？
只要做
主题.headings.map
而不是
这个.topics[topic].headings.map

Map函数返回项目，而不是数组中的位置/索引，因此您可以直接从
topic
调用它，只需执行
topic.headings.Map
，而不是
this.topics[topic].headings.Map

Map函数返回项目，而不是数组中的位置/索引，因此您可以直接从
topic
调用它，而不是从
this.topics[topic].headings.Map（…）
使用
topic.headings.Map（…）

这是因为
.map（）

这是因为
.map（）
返回一个对象，并尝试通过
主题[topic]
将其用作索引，将给您
未定义的
这个。主题[topic]
不起作用，因为
主题
是一个对象。
这个主题[topic]可能重复
不起作用，因为
主题
是一个对象。我不知道为什么我没有尝试，但谢谢。我不知道为什么我没有尝试，但谢谢。
TypeError: Cannot read property 'headings' of undefined