React中如何嵌套映射数组？动态菜单实现遇阻求助

问题根源分析 #

你的代码存在几个关键错误：

1. map参数误用：arrayNavCadastros.map((item:any, subMenu: any) 中第二个参数是数组的索引，不是子菜单数据。subMenu变量实际为undefined，所以内层map无输出。
2. 子数组访问错误：item.subMenu.name写法错误，因为subMenu是数组，不能直接访问name属性，必须遍历数组才能获取子项数据。
3. HTML结构不规范：子菜单的<a>标签未包裹在<li>内，不符合列表的HTML语义规范。
4. 缺少key属性：React列表渲染需要唯一的key属性来优化渲染性能，避免不必要的重渲染。

修正后的代码 #

<ul>
  {arrayNavCadastros.map((item) => (
    <li key={item.name} className="nav-item">
      <i className={item.icon}></i>
      <a href="">{item.name}</a>
      {/* 先判断subMenu是否存在且有数据，避免空数组或undefined报错 */}
      {item.subMenu && item.subMenu.length > 0 && (
        <ul>
          {item.subMenu.map((subItem) => (
            <li key={subItem.name}>
              <a href={subItem.path}>{subItem.name}</a>
            </li>
          ))}
        </ul>
      )}
    </li>
  ))}
</ul>

关键说明 #

• 嵌套map逻辑：和Angular的嵌套*ngFor逻辑一致，React中通过外层map遍历主菜单数据，内层map遍历当前item的subMenu数组生成子菜单。
• 类型安全优化（可选）：既然使用TypeScript，建议替换any为你的IObjects接口，获得完整的类型提示：

  arrayNavCadastros.map((item: IObjects) => { ... })
  item.subMenu.map((subItem: IObjects) => { ... })
  

• 空值防御：添加item.subMenu && item.subMenu.length > 0判断，确保只有存在有效子菜单时才渲染内层列表，避免因subMenu为undefined或空数组导致的运行时错误。

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