./src/templates/project-details.js 中的 ProjectDetails 函数出错：7

Question

==无聊，但可能必要的环境条件==

YouTube 上 NetNinja 的 Gatsby 教程在网络上非常受欢迎，我到处都能看到对代码的逐字引用。因此，我使用了静态页面中报告的确切错误，因为我相信这个确切的错误，甚至行号，也会出现在尝试本教程的其他人身上。

基本上，NetNinja 将一个简单的入门模板 Hello World 扩展并增强为一个组合网站。

我认为本教程使用的是 Gatsby 2.n 或 3.n，但当我开始使用它时，我使用的是 Gatsby 5.11，并且在整个教程中的几个点上，我必须在构建 hello 后立即重新开始并安装软件包-世界。

==问题描述==

我终于读完了教程，并且可以发誓我让它完美运行，当您单击“组合项目”时，您将被路由到组合列表。单击其中一项，您将再次被路由到该特定项目。昨天我启动了该网站向朋友展示，但投资组合结束页面给了我下面屏幕截图中显示的错误。

我的所有页面都可以工作，除了最后一个端点（投资组合项目）：

关于这个具体问题的信息并不多，而且我不是 React 专家，我真的不知道如何解决 PHP 或普通 JavaScript 问题。

我做了

console.log(data)

，控制台显示数据未定义。

希望有人更熟悉 Gatsby 和 React，也可能是我引用的项目。

== 调用页面== 这个文件是 web-warrior\src\pages\projects\index.js

import React from 'react'
import Layout from '../../components/Layout'
import * as styles from '../../styles/projects.module.css'
import { Link, graphql } from 'gatsby'
import Img from "gatsby-image"

 const Projects = ({ data }) => {
 //console.log(data)
 const projects = data.projects.nodes
 const contact = data.contact.siteMetadata.contact
 
  return (
    <Layout>
      <div className={styles.portfolio}>
        <h2>Portfolio</h2>
        <h3>Projects & Websites I've Created</h3>
        <div className={styles.projects}>
          {projects.map(project => (
            <Link to={"/projects/" + project.frontmatter.slug} key={project.id}>
              <div>
                <Img fluid={project.frontmatter.thumb.childImageSharp.fluid} />
                <h3>{ project.frontmatter.title }</h3>
                <p>{ project.frontmatter.stack }</p>
              </div>
            </Link>
          ))}
        </div>
        <p>Likewhat you see? email me at {contact} for a quote!</p>
      </div>
    </Layout>
  );
}
 
export default Projects

// export page query
export const query = graphql`
  query ProjectsPage {
    projects: allMarkdownRemark(sort: {order: DESC, fields: frontmatter___date}) {
      nodes {
        frontmatter {
          slug
          stack
          title
          thumb {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
        id
       }
    }
    contact: site {
      siteMetadata {
        contact
      }
    }
  }
`

Answer 1

该错误表明

data

变量未定义，因此您无法访问

data.markdownRemark

并从中解构

html

属性。

基本上，组件

<ProjectDetails data={data}/>

接收未定义的数据，或者根本不接收数据。确保正确传递 prop。我无法帮助您解决此问题，因为我不知道数据是什么或您在何处呈现 ProjectDetails。

您可以执行以下操作：

1. 在项目中搜索

   <ProjectDetails

   组件。您需要找到渲染该组件的文件
2. 检查数据是否正在传递且未定义

   <ProjectDetails/> 

   ->

   <ProjectDetails data={...?}/> 

3. 查找数据从何处传递，并确保它不是未定义的或者您实际上传递的是正确的东西。
4. 如果您找到问题根源，请发布更新，以便我们进行调查。