React中如何嵌套遍历对象内数组，按学年列出所有科目？

你的代码存在两个核心问题：

• 直接访问course.subjects.class，但subjects是数组，必须遍历才能获取每个科目
• 列表项<li>没有包裹在<ul>/<ol>容器中，不符合HTML规范，也无法正确渲染列表

修正后的代码如下：

export const studies = courses.map((course) => (
  <div key={course.id}>
    <h2>{course.title}</h2>
    {/* 用ul包裹科目列表，保证HTML结构合法 */}
    <ul>
      {/* 遍历subjects数组，生成每个科目列表项 */}
      {course.subjects.map((subject) => (
        <li key={subject.id}>{subject.class}</li>
      ))}
    </ul>
  </div>
));

关键改动说明： #

1. 给每个学年的科目列表添加<ul>容器，满足HTML列表的结构要求
2. 对course.subjects执行map遍历，逐个渲染对应的科目项
3. 给每个<li>添加key={subject.id}，符合React对列表元素的key属性要求
4. 正确通过subject.class获取单个科目的名称

这样就能实现每个学年标题下展示对应所有科目的效果了。

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