17370845950

本文详解如何在 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() 模式，是处理树形、分组、多维表格等真实业务数据的基础能力。