javascript - 映射内部映射以获取子数组

Question

我有以下数据:

{
"data": {
"site": {
  "siteMetadata": {
    "siteLinks": [
      {
        "title": "title 1",
        "submenu": [
          {
            "title": "test-1",
          }
        ]
      },
      {
        "title": "title 2",
        "submenu": [
          {
            "title": "test-2",
          }
        ]
      },
      {
        "title": "title-3",
        "submenu": [
          {
            "title": "test-3",
          }
        ]
      },
      {
        "title": "title-4",
        "submenu": [
          {
            "title": "test-4",
          }
        ]
      }
    ]
  }
}

}}

我正在尝试映射以获取子菜单标题。我已经成功地使用以下代码获得了第一个标题，但我正在努力将 map 放入 map 中。

import React from "react"

const Header = props => (
<div>
    {props.siteLinks.map((item, key) => (
        <div>
            <li key={item.title}>{item.title}</li>
        </div>
    ))}
</div>
)

export default Header

任何帮助将不胜感激

Answer 1

您可以在第一个 map 功能中添加第二个 map 功能

import React from 'react';

const Header = props => (
      <div>
       {props.siteLinks.map((item, key) => (
        <div key={item.title}>
            <li>{item.title}</li>
            {item.submenu.map((x)=>(
              <li key={x.title}>{x.title}</li>
            ))}
        </div>
       ))}
    </div>
)

export default Header;