javascript - TypeError : Cannot read property 'map' of undefined. 找不到解决办法

Question

代码编译成功，但在本地主机上它给我一个错误:类型错误:无法读取未定义的属性“映射”。

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;

Answer 1

props.courses 似乎在某些时候未定义；可能在异步加载数据之前。

您有几个选择!

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

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

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

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

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

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