Next.js中EduSection组件报TypeError: education.map is not a function求助

问题根源 #

1. EduSection组件Props接收错误：React组件的入参是包含所有props的对象，而非单个属性。原代码里function EduSection(education)中的education实际是整个props对象，不是传递的数组，因此调用map会抛出TypeError: education.map is not a function。
2. EduItem组件Props接收错误：组件未正确解构props对象，直接声明单个参数无法获取传递的属性值。

修复后的代码 #

EduSection组件修复后 #

import React from 'react'
import EduItem from './EduItem'

// 解构props对象，取出education数组
function EduSection({ education }) {
  return (
    <>
        <div className="section">
        <div className="section__title">Education</div>
        <div className="section__list">
          {education.map((eduItem, index) => (
          <EduItem key={index} {...eduItem} />
        ))}
        </div>
      </div>
    </>
  )
}

export default EduSection;

EduItem组件修复后 #

import React from 'react'

// 解构props对象，取出需要的属性
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

额外优化建议 #

• 遍历数组时，优先使用数据中的唯一标识作为key（如每个education对象的专属ID），而非索引，避免不必要的渲染重排。
• 可添加空值判断，防止数组未传递时报错，比如使用可选链操作符：{education?.map(...)}。

内容的提问来源于stack exchange，提问作者Abdullah Naseer