使用 JSX 映射数组

Question

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

这里是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(...)

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

Answer 2

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

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