React组件传参后对象属性返回undefined问题求助

核心原因 #

你传入组件的project是数组类型，但组件内错误地将其当作单个对象来访问属性。

• 你定义的portfolioProject是包含一个项目对象的数组，通过<Projects project={portfolioProject}/>传递给组件的是整个数组，而非数组里的单个项目对象。
• 数组本身没有title、description这类属性，所以project.title会返回undefined；而打印整个project时，会显示数组的内容（包含那个项目对象），所以看起来“正常”。

解决方法 #

根据你的需求选择以下两种方式：

方式一：仅展示单个项目

如果你的作品集目前只有这一个项目，修改传参代码，直接传递数组里的对象：

<Projects project={portfolioProject[0]}/>

这样组件内的解构和属性访问就能正常工作了。

方式二：支持展示多个项目

如果后续要添加更多项目，建议组件适配数组遍历：

function Projects({heading, project}) {
  return (
    <section>
      {heading && <h2>{heading}</h2>}
      {/* 遍历项目数组，渲染每个项目 */}
      {project.map((item, index) => {
        const {title, description, img, gitHub} = item;
        return (
          <div key={index} className="project-card">
            <h3>{title}</h3>
            <p>{description}</p>
            <img src={img} alt={title} />
            <a href={gitHub} target="_blank" rel="noopener noreferrer">查看GitHub</a>
          </div>
        )
      })}
    </section>
  )
}

另外建议把props命名改为projects（复数形式），语义更清晰：

<Projects heading="我的项目" projects={portfolioProject}/>

组件内对应修改参数：

function Projects({heading, projects}) {
  // 用projects遍历...
}

内容的提问来源于stack exchange，提问作者Gavin-walsh