本文讲解如何在 react 中使用 `.map()` 正确遍历包含嵌套数组的对象（如课程与科目结构），通过双重 `map` 实现层级化列表渲染，并确保 key 唯一性与 html 语义正确性。

在 React 中，当数据结构为“对象内含数组”（例如每个课程包含多个科目）时，单层 .map() 仅能访问外层数据（如课程标题），无法直接访问内层数组项（如 course.subjects.class）。这是因为 course.subjects 是一个数组，而 course.subjects.class 是非法访问——数组没有 class 属性，需先遍历该数组。

正确的做法是：在外层 .map() 渲染课程的同时，在其 JSX 内部嵌套第二层 .map() 来遍历 subjects 数组。同时需注意以下关键点：

• ✅ 每个 .map() 的返回元素必须带有唯一 key（推荐使用数据本身的 id）；
• ✅ 列表项
• 必须包裹在语义化容器中（如
  或
  ），否则不符合 HTML 规范且可能引发警告；
• ❌ 避免使用索引 index 作为 key（尤其在列表动态增删时），优先使用稳定唯一标识（如 subject.id）；
• ⚠️ 若 subjects 可能为空或未定义，建议添加可选链（?.）或默认值防护：{course.subjects?.map(...) || []}。

以下是完整、健壮的实现代码：

export const studies = courses.map((course) => (
  
    
{course.title}
    

      {course.subjects?.map((subject) => (
        
{subject.class}
      )) || 
No subjects available
}
    
  
));

该方案清晰分离了层级逻辑：外层映射课程，内层映射科目；既保证渲染正确性，也兼顾可维护性与错误容错能力。最终页面将呈现为：

  
first year
  

    
french
    
history
    
geometry
  


  
second year
  

    
geography
    
chemistry
  

掌握这种嵌套映射模式，是处理树形、分组、分类等真实业务数据（如菜单、商品分类、用户权限列表）的基础能力。