本文讲解如何在 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
掌握这种嵌套映射模式，是处理树形、分组、分类等真实业务数据（如菜单、商品分类、用户权限列表）的基础能力。
