TypeError：无法读取未定义的属性“映射”，是否无法将数组作为道具传递给功能组件？答案

【问题标题】：TypeError: Cannot read property 'map' of undefined, Is passing an array as a prop to a functional component not possible?TypeError：无法读取未定义的属性“映射”，是否无法将数组作为道具传递给功能组件？
【发布时间】：2020-01-11 18:09:01
【问题描述】：

我正在关注 MERN 堆栈教程，其中父组件 Dashboard 将一组对象从其自己的道具（在 mapStateToProps 之后）传递到另一个组件 Education。尝试在 Education 组件中遍历这个数组会给我上面提到的错误。请帮忙，教程似乎没有错误，我完全按照它，为什么会出现问题？

<Education education={profile.education}/>

（在 Dashboard.js 中传递道具）教育是对象配置文件中的对象数组，该对象配置文件是从状态映射的道具。 profile 属性在同一组件的其他行中使用，不会给出任何其他错误。

const Education = ({education}) => {
    const educations = education.map(edu => (
    <tr key={edu._id}>
        <td>{edu.institute}</td>
        <td>{edu.course}</td>
        <td>
        <Moment format='YYYY/MM/DD'>{edu.from}</Moment - <Moment 
         format='YYYY/MM/DD'>{edu.to}</Moment>
        </td>
        <td className="btn brick">
            Delete
        </td>
    </tr>
    ));

     ...return block with JSX that renders when {educations} is omitted
}

（尝试在 Education.js 中迭代）

编辑：完整的 Dashboard.js 代码

import React ,{Fragment,useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {getCurrentProfile} from '../../actions/profile';
import Spinner from '../layouts/Spinner';
import DashboardActions from './DashboardActions';
import Education from './Education';

const Dashboard = ({getCurrentProfile, auth, profile}) => {

useEffect(() => {
    getCurrentProfile();
}, []);


return (
    profile.loading && profile.profile === null ? <Spinner /> : <Fragment>
        <h1 className="large text-primary">Dashboard</h1>
        <p className="lead">Welcome {auth.user && auth.user.name }</p>
        {profile.profile !== null
        ?
        <Fragment>
            <DashboardActions/>
            <Education education={profile.education}/>
        </Fragment>
        : 
        <Fragment>
            <p>You have not yet set up a profile, please add some 
information about yourself</p>
            <Link to="/create_profile" className="btn btn-primary">Create 
Profile</Link>
        </Fragment>}
    </Fragment>
    );
}

Dashboard.propTypes = {
getCurrentProfile: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
auth: state.auth,
profile: state.profile
});

export default connect(mapStateToProps, {getCurrentProfile})(Dashboard);

【问题讨论】：

在某些时候education 属性可能是undefined。您可以链接到教程并包含更多代码吗？这个组件是如何被调用和使用的？
您还需要添加其余代码。这还不足以知道真正的问题在哪里。初始状态对象是什么样的？
本教程是 Brad Traversy 在 Udemy 上的付费课程。 MERN stack 社交媒体项目课程。

标签： arrays reactjs dictionary undefined react-props

【解决方案1】：

您是否尝试过console.log(education) 来了解教育的价值？

我认为是undefined，而正在加载配置文件。

你可以试试const educations = education && education.map(edu => (

【讨论】：

我还想建议不要说profile prop 只是some 对象，而是实际定义它的形状，即它具有哪些属性以及实际需要哪些属性为了正常运行。我同意education 可能未定义，但为什么配置文件已定义但不知何故缺少教育属性？

【解决方案2】：

我有一个类似的问题，我被困了很长时间。

我的原因非常模糊，但我正在导入一个对象History，我会将 PropType 对象传递给该对象。

然后我在我的 Progress 对象中创建了一个 PropType history，我在 propTypes 对象中对其进行了定义。

import History from "../components/class/History";
...
const Progress = ({ history, ...
...
    <History data_in={history}/>
...
Progress.propTypes = {
  history: PropTypes.object.isRequired,
...

History 导入和历史创建为 PropType 的冲突导致对象作为未定义传递到 History，因此在未定义对象上调用 .map。

我不确定是否有人会设法复制它，但它可以帮助某人。 :)

【讨论】：