TypeError：无法读取未定义的属性（正在读取“映射”）（JavaScript 数组映射）

Question

在我的 React 组件中，我收到了道具，下面是组件。 我只需要获取道具即数据并将其映射并渲染数据

零件

import * as React from "react";
    import { Box } from "@chakra-ui/react";
    import CourseCard from "./CourseCard";
    import CourseGrid from "./CourseGrid";
    
    const CardLayout = ({ data }) => {
      console.log(data);
      return (
        <Box
          maxW="7xl"
          mx="auto"
          px={{
            base: "4",
            md: "8",
            lg: "12",
          }}
          py={{
            base: "4",
            md: "8",
            lg: "12",
          }}
        >
          <CourseGrid>
            {data.getPs_courseList.map((course) => (
              <CourseCard key={course.slug} course={course} />
            ))}
          </CourseGrid>
        </Box>
      );
    };

export default CardLayout;

传入道具

{
  "getPs_courseList": [
    {
      "short_desc": "JavaScript for Beginners",
      "slug": "javascript_for_beginners",
      "price": "10$",
      "trainer_name": "John",
      "language": "English",
      "level": "Beginner",
      "length_in_minutes": "120"
    },
    {
      "short_desc": "What is GraphQL?",
      "slug": "what_is_graphql",
      "price": "FREE",
      "trainer_name": "Anita",
      "language": "English",
      "level": "Intermediate",
      "length_in_minutes": "230"
    }
  ]
}

当我尝试使用如下所示的地图功能时，出现错误。 谁能建议我在这里缺少什么？

 {data.getPs_courseList.map((course) => (
          <CourseCard key={course.slug} course={course} />
        ))}

错误

Answer 1

数据总是被填满？ 也许，当组件被调用时，数据还不是真的。 因此，您可以在之前验证 Data 是否为真，然后运行 ​​de map 方法。

{ data &&
 data.getPs_courseList.map((course) => (
      <CourseCard key={course.slug} course={course} />
    ))}

Answer 2

const CardLayout = ({ data }) => {

用。。。来代替

const CardLayout = ( data ) => {