Javascript TypeError:无法读取属性'；地图'；未定义的。Can'；我找不到解决办法

代码编译成功，但在localhost上它向我抛出了一个错误：TypeError:无法读取未定义的属性“map”

import React from 'react';
    
    const Module = (props) => {
        const courses = props.courses;
        console.log(props.courses);
        let Course = courses.map(item=><li>{item}</li>)
        
        return(
            <ul>{Course}</ul>
        )
    }
    
    export default Module;

从“React”导入React；
常量模块=（道具）=>{
常量课程=道具课程；
控制台日志（道具课程）；
让Course=courses.map（item=>
{item}
）
返回(
{Course}
)
}
导出默认模块；

确保

道具

包含以下数据：

import React from 'react';

const Module = (props) => {
    const { courses } = props;
    const Course = courses && courses.length > 0 ? courses.map(item=><li>{item}</li>) : null;
    return Course ? (<ul>{Course}</ul>) : null;
}

export default Module;

从“React”导入React；
常量模块=（道具）=>{
const{courses}=props；
const Course=courses&&courses.length>0？courses.map（item=>
{item}
）：null；
返回课程？（
{Course}
）：空；
}
导出默认模块；

似乎

道具课程

在某个点上没有定义；可能在异步加载数据之前

你有几个选择

选项1:默认

课程

为空数组。这将解决错误，但可能会让用户感到困惑，因为加载状态不清楚

const Module = (props) => {
  const courses = props.courses || [];
  console.log(props.courses);
  let Course = courses.map(item=><li>{item}</li>)
  return(
    <ul>{Course}</ul>
  )
}

const模块=（道具）=>{
const courses=props.courses | |[]；
控制台日志（道具课程）；
让Course=courses.map（item=>
{item}
）
返回(
{Course}
)
}

选项2:仅在数据存在时映射数据；否则显示加载指示器。这可能对用户体验更好

const Module = (props) => {
  const courses = props.courses;

  if (!courses) {
    return "Loading...";
  }

  let Course = courses.map(item=><li>{item}</li>)
  return(
    <ul>{Course}</ul>
  )
}

const模块=（道具）=>{
常量课程=道具课程；
如果（！课程）{
返回“加载…”；
}
让Course=courses.map（item=>
{item}
）
返回(
{Course}
)
}

您可以使用解构，以及默认参数来防止上述错误，并减少代码

const Module = ({courses = []}) => {
    console.log(courses);
    return <ul>
        {courses.map(item=><li>{item}</li>)}
    </ul>;
};

const模块=（{courses=[]}）=>{
控制台日志（课程）；
返回

{courses.map（item=>
{item}
）}
；
};

你认为道具课程是什么？你做过调试吗？