Trying to select property from array within object, within array. Thrown TypeError: Cannot read properties of undefined

Question

我正在尝试使用 React 制作一个项目，该项目可以在待办事项列表中显示课程作业。我目前有一些测试数据，如下所示：

 const courses = [
    {
      courseName: "Fundies 2",
      classCode: "CS2510",
      startTime: "4:35 PM",
      location: "236 Richards Hall",
      color: "red",
      homework: [{ hwName: "HW3", timeDue: "8:30 PM" }]
    },
    {
      courseName: "Mathematical Reasoning",
      classCode: "MATH1365",
      startTime: "10:20 AM",
      location: "235 Ryder Hall",
      color: "blue",
      homework: [
        { hwName: "HW2", timeDue: "midnight" },
        { hwName: "HW3", timeDue: "midnight" },
      ]
    },
  ];

我创建了一个函数来根据这些数据创建一个组件，如下所示。

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

我想用作业数组中的第一个条目来制作组件。但是，每当我尝试编译时，我都会得到

"TypeError: Cannot read properties of undefined (reading 'hwName')"

我该如何解决这个问题？

非常感谢任何帮助！

Answer 1

您的索引不正确。如果你想要第一个条目，那么它应该是 0 而不是 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}
      />
    );
  });

Trying to select property from array within object, within array. Thrown TypeError: Cannot read properties of undefined

Trying to select property from array within object, within array. Thrown TypeError: Cannot read properties of undefined

javascript

jsx

reactjs