TypeError:无法读取未定义的属性"map"，是否无法将数组作为prop传递给功能组件? [英] TypeError: Cannot read property 'map' of undefined, Is passing an array as a prop to a functional component not possible?

问题描述

我正在跟踪一个MERN堆栈教程，其中父组件仪表板将一系列对象从其自身的props(在mapStateToProps之后)传递给另一个组件Education.尝试遍历Education组件中的此数组会给我上述错误.请帮忙，本教程似乎没有错误，我已经完全遵循了，所以为什么会出问题?

I am following a MERN stack tutorial in which a parent component Dashboard passes an array of objects from its own props (after mapStateToProps) to another component Education. Trying to iterate through this array in Education component gives me the above mentioned error. Please help, the tutorial seemed to have no errors and I have followed it perfectly so why the issue?

<教育教育= {profile.education}/>

(在Dashboard.js中通过prop)教育是对象配置文件中的对象数组，该对象配置文件是从状态映射的prop.概要文件属性用于同一组件的其他行中，不会产生任何其他错误.

(passing the prop in Dashboard.js) education is an array of objects inside an object profile which is a prop mapped from the state. The profile prop is used in other lines in the same component and does not give any other errors.

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中进行迭代)

(trying to iterate in Education.js)

完整的Dashboard.js代码

Full Dashboard.js code

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

推荐答案

您是否尝试过 console.log(education)来查看教育的价值?

Have you tried console.log(education) to see the value of education?

我认为加载配置文件时它是 undefined .

I think it is undefined while the profile is loading.

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

这篇关于TypeError:无法读取未定义的属性"map"，是否无法将数组作为prop传递给功能组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！