next.js TypeError:education.mapis not a function生成页面时发生此错误,所有控制台日志将显示在终端窗口中

u3r8eeie  于 2023-04-05  发布在  其他
关注(0)|答案(1)|浏览(116)

大家好,我正在尝试做一些事情,我有一个Nextjs名称为Project.js的主文件,我正在导入组件init,我面临的问题是将数据从主文件导出到名为Resume的对象到组件educationsection...

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: "mianabdullah125125@gmail.com",
      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中,我正在导入子组件init名称为EduItem`
x一个一个一个一个x一个一个二个x
同样的事情,我正在做的经验部分,它是工作正常,但给错误的教育部分的错误是说:**服务器错误类型:education.map不是函数
生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。**如果有任何好友帮助,我将不胜感激
期望是

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

我将从主文件中获取props数据到eduitem,然后在edusection中,但它抛出错误

hrirmatl

hrirmatl1#

你试图在包含所有props的对象上调用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;

相关问题