Question

TypeError：无法读取未定义的属性“map”。找不到解决方案

2020-12-19

279

javascript node.js arrays reactjs

代码编译成功但在本地主机上出现错误：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;

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>
  )
}

Answer 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;

Answer 3

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

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