TypeError：无法读取未定义的属性“地图”。找不到解决办法

Posted 2023-03-08

【中文标题】TypeError：无法读取未定义的属性“地图”。找不到解决办法

【英文标题】：TypeError: Cannot read property 'map' of undefined. Can't find a solution

【发布时间】：2021-03-30 04:10:43

【问题描述】：

代码编译成功，但在 localhost 上出现错误：TypeError: Cannot read property 'map' of undefined.

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;

【问题讨论】：

那么你认为 props.courses 是什么？有没有调试过？

【参考方案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>
  )

【参考方案2】：

确保props 包含数据：

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;

【参考方案3】：

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

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