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

【问题标题】：TypeError: Cannot read properties of undefined (reading 'map') (JavaScript array map)TypeError：无法读取未定义的属性（读取“映射”）（JavaScript 数组映射）
【发布时间】：2022-06-21 23:54:29
【问题描述】：

在我的 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} />
        ))}

错误

【问题讨论】：

所以 getPs_courseList 未定义

标签： javascript reactjs arrays react-props

【解决方案1】：

const CardLayout = ({ data }) => {

替换为

const CardLayout = ( data ) => {

【讨论】：