GatsbyJS - TypeError: невозможно прочитать свойство childImageFluid из undefined

Я работаю над веб-сайтом Gatsby и продолжаю получать TypeError: Cannot read property 'childImageFluid' of undefined

Код, который у меня есть, находится в моем файле 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

и у меня установлен graphql в файле index.js, где он будет отображаться, и все работает так, как должно, в 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, но весь этот код находится в первом разделе кода выше.


reactjs javascript gatsby gatsby-image
person mbert86    schedule 08.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы используете запрос страницы в 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.

person Ferran Buireu    schedule 08.07.2020