GatsbyJS - 类型错误：无法读取未定义的属性'childImageFluid'

Question

我正在盖茨比的一个网站上工作，我不断得到"TypeError:无法读取未定义的"的属性"childImageFluid"；

我的Project.js文件中有这样的代码

import React from "react"
import PropTypes from "prop-types"
import Image from "gatsby-image"
import { FaGithubSquare, FaShareSquare } from "react-icons/fa"
const Project = ({description, title, github, stack, url, image, index}) => {
return (
<article className="project">
<Image fluid={image.childImageFluid.fluid} className="project-img" />
</article>
) 
}
Project.propTypes = {}
export default Project

我在将要显示的index.js文件中设置了graphql，在graphql中一切都正常工作。。。

export const query = graphql`
{
allStrapiProjects(filter: { featured: { eq: true } }) {
nodes {
github
id
description
title
url
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
stack {
id
title
}
}
}
}
`

我在Project.js文件中所做的一切都在我的github中-https://github.com/matthewbert86/gatsby-site但所有这些代码都在上面的第一个代码部分中。

Answer 1

在GraphQL中使用页面查询时，收集的数据存储在data对象中(作为props(。您需要对其进行迭代，直到获得流体图像。它应该在：props.data.allStrapiProjects.nodes.image.childImageFluid.fluid中。由于您正在破坏<Project>组件中的所有内容：

const Project = ({ data }) => {
let { description, title, github, stack, url, image } = data.allStrapiProjects.nodes; // your data is here
return (
<article className="project">
<Img fluid={data.allStrapiProjects.nodes.image.childImageFluid.fluid} className="project-img" />
</article>
) 
}

销毁后，您可以将其重构为：

<Img fluid={image.childImageFluid.fluid} className="project-img" />

还有一点，我想gatsby-image导入应该是Img，而不是Image。