如何使用map渲染主数组中对象字面量内嵌套的子数组？

问题根源很明确：courses是数组，不是单个对象，所以直接调用courses.parts会返回undefined——数组本身没有parts属性，只有数组里的每个course对象才拥有parts子数组。

正确的渲染逻辑需要两层map遍历：

1. 先遍历外层的courses数组，拿到每个独立的course对象
2. 对每个course对象的parts子数组再做一次遍历，渲染每个part的name、exercises、id属性

以下是完整的App.jsx示例代码：

// 假设你的courses数据结构如下
const courses = [
  {
    id: 1,
    name: "React 核心课程",
    parts: [
      { id: 101, name: "JSX 基础", exercises: 4 },
      { id: 102, name: "函数组件", exercises: 7 },
      { id: 103, name: "状态管理", exercises: 6 }
    ]
  },
  {
    id: 2,
    name: "JavaScript 进阶",
    parts: [
      { id: 201, name: "闭包与作用域", exercises: 5 },
      { id: 202, name: "异步编程", exercises: 8 }
    ]
  }
];

function App() {
  return (
    <div className="App">
      {/* 第一层遍历：遍历主courses数组 */}
      {courses.map(course => (
        <div key={course.id} className="course-container">
          <h2>{course.name}</h2>
          {/* 第二层遍历：遍历当前course的parts子数组 */}
          <ul className="parts-list">
            {course.parts.map(part => (
              <li key={part.id} className="part-item">
                名称：{part.name} | 练习数：{part.exercises} | ID：{part.id}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

关键注意事项 #

• 每次map生成元素时，必须添加唯一的key属性（这里用每个对象的id），这是React要求的规范，能避免渲染性能问题和警告。
• 确保你的courses数据确实是数组结构，如果是从接口获取的数据，要先确认数据已正确加载（比如用条件渲染处理加载中的空数组情况）。

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