我正在关注一个 MERN 堆栈教程,其中父组件仪表板将一组对象从它自己的props(在 mapStateToProps 之后)传递到另一个组件 Education。尝试在 Education 组件中迭代这个数组给了我上面提到的错误。请帮忙,教程似乎没有错误,我完全遵循了它,为什么会出现问题?
<Education education={profile.education}/>
(在 Dashboard.js 中传递props)教育是对象配置文件中的一组对象,它是从状态映射的props。profile prop 用在同一组件的其他行中,不会给出任何其他错误。
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);