如何map遍历嵌套JSON对象 提取subMenu下的name字段值用于渲染

场景1：保留外层菜单层级，每个一级分类下渲染对应子按钮 #

你只需要在现有li内部，对subMenu数组再做一层map遍历即可，实现代码如下：

<ul>
  {data.map(({ title, subMenu }) => (
    <li key={title} className="mobileMenu-body-nav-item">
      {/* 如果你需要保留一级标题展示，可以打开下面的注释 */}
      {/* <span className="mobileMenu-body-nav-title">{title}</span> */}
      {subMenu.map(item => (
        <button 
          key={item.id}
          className="mobileMenu-body-nav-item-btn"
        >
          {item.name}
        </button>
      ))}
    </li>
  ))}
</ul>

场景2：所有子菜单项单独作为li渲染，不保留外层层级 #

先把所有subMenu的子项扁平化成一个一维数组再遍历即可，代码如下：

<ul>
  {data.flatMap(item => item.subMenu).map(subItem => (
    <li key={subItem.id} className="mobileMenu-body-nav-item">
      <button className="mobileMenu-body-nav-item-btn">
        {subItem.name}
      </button>
    </li>
  ))}
</ul>

• 遍历渲染列表元素时记得给每个元素加唯一key属性，这里用subMenu里自带的id作为key是最优选择，可避免框架渲染警告。

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