本文详解如何在 react 中对嵌套数据结构（如课程对象内包含科目数组）进行双重遍历，通过外层 `.map()` 渲染课程标题，内层 `.map()` 渲染对应科目列表，并确保 key 唯一性与 html 结构合法性。
在 React 中渲染层级化数据时，常见误区是试图直接访问数组属性（如 course.subjects.class），但 subjects 是一个数组，而非单个对象——因此必须显式遍历它。正确做法是：外层 .map() 处理课程（course）列表，内层 .map() 处理每个课程下的 subjects 数组。
以下是修正后的完整实现：
export const courses = [
{
id: 0,
title: "first year",
subjects: [
{ id: 0, class: "french" },
{ id: 1, class: "history" },
{ id: 2, class: "geometry" }
],
},
{
id: 1,
title: "second year",
subjects: [
{ id: 0, class: "geography" },
{ id: 1, class: "chemistry" }
],
}
];
// ✅ 正确：嵌套 map + 合法语义化 HTML 结构
export const studies = courses.map((course) => (
{course.title}
{course.subjects.map((subject) => (
- {subject.class}
))}
));⚠️ 关键注意事项：
- key 必须唯一且稳定：外层 div 使用 course.id，内层 li 使用 subject.id（不可用索引 index，尤其当列表可能增删时）；
- HTML 语义规范：
- 必须包裹在
- 或
- 内，否则违反 DOM 规范，可能引发渲染异常或可访问性问题；
-
避免空数组报错：若 subjects 可能为 undefined 或空数组，建议添加安全检查：
{course.subjects?.length > 0 && ( ... )} 或 {course.subjects?.map(...) || null}； - 性能提示：深层嵌套 .map() 在大数据量下可能影响性能，此时应考虑 React.memo 或虚拟滚动优化。
总结：React 的列表渲染本质是「数据驱动视图」，每一层集合数据都需独立映射。掌握嵌套 .map() 模式，是处理树形、分组、多维表格等真实业务数据的基础能力。
