React中如何访问对象内的数组元素并渲染嵌套菜单？

我有一个包含多个对象的数组，每个对象内部嵌套着subMenuItems数组。我希望遍历每个对象的subMenuItems数组并输出其中的值。我的MenuItems数组代码如下：

export const MenuItems = [
  {
    category: 'Buy',
    subMenuItems: [
      {
        title: `Watching`,
        link: '/watching',
      },
      {
        title: `Bids & Offers`,
        link: '/bids-offers',
      },
      {
        title: `Bought`,
        link: '/bought',
      },
    ],
  },

  {
    category: 'Sell',
    subMenuItems: [
      {
        title: `Selling`,
        link: '/selling',
      },
      {
        title: `Sold`,
        link: '/sold',
      },
      {
        title: `Sell with us`,
        link: '/sell-with-us',
      },
    ],
  },
];

目前我能通过以下代码获取每个对象的category：

const listItems = MenuItems.map((item, i) => (
    <li key={i}>{item.category}</li>
));

// 渲染部分
return(
<ul>{listItems}</ul>
)

但始终写不对访问subMenuItems的语法，最终想要实现的效果是每个分类下方显示对应的子菜单项，示例如下：

Buy

 - Watching
 - Bids & offers
 - Bought

Sell

 - Selling
 - Sold
 - Sell With Us

你只需要在外层的map里嵌套一个map遍历subMenuItems数组，就能生成符合需求的嵌套结构。以下是实现代码：

const menuList = MenuItems.map((mainItem, mainIndex) => (
  <div key={mainIndex}>
    {/* 渲染分类标题 */}
    <p>{mainItem.category}</p>
    {/* 渲染子菜单列表 */}
    <ul>
      {mainItem.subMenuItems.map((subItem, subIndex) => (
        <li key={subIndex}>{subItem.title}</li>
      ))}
    </ul>
  </div>
));

// 渲染部分
return <div>{menuList}</div>;

代码说明 #

1. 外层map遍历MenuItems数组，先渲染当前分类的标题。
2. 内层map遍历当前分类下的subMenuItems数组，逐个渲染子菜单项的title。
3. 给每个动态生成的元素设置唯一key，这里用数组索引作为临时方案，如果你的数据有业务唯一ID，用ID会更稳妥。

如果需要用嵌套列表的结构（分类作为父列表项），也可以这样写：

const menuList = MenuItems.map((mainItem, mainIndex) => (
  <li key={mainIndex}>
    <strong>{mainItem.category}</strong>
    <ul>
      {mainItem.subMenuItems.map((subItem, subIndex) => (
        <li key={subIndex}>{subItem.title}</li>
      ))}
    </ul>
  </li>
));

return <ul>{menuList}</ul>;

内容的提问来源于stack exchange，提问作者Connor