TypeError: education.map不是一个函数，在生成页面时发生错误.所有控制台日志将显示在终端窗口中.&

Question

大家好，我想做一些事情，我有一个Nextjs名称的主文件Project.js并且我正在导入组件init，我面临的问题是将数据从主文件导出到名为Resume的对象到组件教育部分…

import EduSection from "@/components/EduSection";
import ExpSection from "@/components/ExpSection";
import IntrestSection from "@/components/IntrestSection";
import Navbar from "@/components/Navbar";
import ProjectSection from "@/components/ProjectSection";
import ResumeHead from "@/components/ResumeHead";
import SkillSection from "@/components/SkillSection";
import React from "react";
function projects() {
let Resume = {
Head: {
firstName: "Abdullah",
lastName: "Naseer",
email: "[e-mail]",
phone: "03061356081",
about: "lorem lipsemmmm ",
},
exprience: [
{
companyName: "AirLift Express",
role: "Dispatch Coordinator",
duration: "March 2022, November 2022",
jobDes: "leremmmmmmmmm",
address: "Kohinoor, Faisalabad",
},
{
companyName: "Akount",
role: "Fr developer",
duration: "Jan 2011 - Feb 2015",
jobDes: "did This and that",
address: "San Monica, CA",
},
],
education: [
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
{
name: "BSSE",
address: "Faisalabad",
duration: "2020-2024",
schoolName: "GCUF",
},
],
};
return (
<>
<Navbar />
<>
<link
href="https://fonts.googleapis.com/css?family=Lato:400,300,700"
rel="stylesheet"
type="text/css"
/>
<div className="container">
<ResumeHead {...Resume.Head} />
<div className="details">
<ExpSection exprience={Resume.exprience} />
<EduSection education={Resume.education} />
<ProjectSection />
<SkillSection />
<IntrestSection />
</div>
</div>
</>
</>
);
}
export default projects;

问题在EduSection我正在导入子组件初始化名称为EduItem'

import React from 'react'
import EduItem from './EduItem'
function EduSection(education) {
return (
<>
<div className="section">
<div className="section__title">Education</div>
<div className="section__list">
{education.map((education, index) => (
<EduItem key={index} {...education} />
))}
</div>
</div>
</>
)
}
export default EduSection;

import React from 'react'
function EduItem(name,address,duration,schoolName) {
return (
<>
<div className="section__list-item">
<div className="left">
<div className="name">{name}</div>
<div className="addr">{address}</div>
<div className="duration">{duration}</div>
</div>
<div className="right">
<div className="name">{schoolName}</div>
{/* <div className="desc">did This and that</div> */}
</div>
</div>
</>
)
}
export default EduItem

同样的事情，我正在做的经验部分，它工作良好，但在教育部分给出错误错误提示:**服务器错误TypeError:教育。Map不是函数

生成页面时发生错误。终端窗口将显示所有控制台日志如果有朋友帮忙，我将不胜感激

期望是

{education.map((education, index) => (
<EduItem key={index} {...education} />
))}

将把props数据从主文件中获取到eduitem中，然后在eduection中获取但是它抛出了错误

Answer 1

您正在尝试在包含所有道具的对象上调用map。您的属性education被分配给这个对象中的一个字段。看看这个:

import React from 'react'
import EduItem from './EduItem'
function EduSection(props) {  
return (
<>
<div className="section">
<div className="section__title">Education</div>
<div className="section__list">
{props.education.map((education, index) => (
<EduItem key={index} {...education} />
))}
</div>
</div>
</>
)
}
export default EduSection;