React读取对象内嵌套数组属性报TypeError undefined如何解决

错误根因 #

• JavaScript 数组索引从0开始计数，你需要的第一条作业对应索引为0，而非代码中使用的1
• 你提供的第一条测试课程Fundies 2的homework数组仅有1条数据，索引1对应的值为undefined，访问undefined的hwName属性就会触发你遇到的类型错误。

修复代码 #

直接把所有course.homework[1]替换为course.homework[0]即可，同时建议增加可选链操作符做兼容，避免后续出现无作业的课程时再次抛出错误，示例如下：

const formattedCourses = courses.map((course) => {
    // 取第一条作业，无作业时跳过渲染
    const firstHomework = course.homework?.[0];
    if (!firstHomework) return null;
    return (
      <Task
        // 组合课程编码和作业名作为key，避免不同课程作业重名导致的key冲突问题
        key={`${course.classCode}-${firstHomework.hwName}`}
        timeDue={firstHomework.timeDue}
        courseName={course.courseName}
        hwName={firstHomework.hwName}
        color={course.color}
      />
    );
  });

如果确认所有课程永远存在至少1条作业，可以简化为：

const formattedCourses = courses.map((course) => {
    return (
      <Task
        key={course.homework[0].hwName}
        timeDue={course.homework[0].timeDue}
        courseName={course.courseName}
        hwName={course.homework[0].hwName}
        color={course.color}
      />
    );
  });

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