javascript - Gatsby 应用程序崩溃并出现错误“无法读取属性”，即使可以在控制台记录属性

问题描述

我正在尝试使用 Gatsby 的无头 CMS 中的图像，但是每当我访问我的“mainImage”时，我都会收到一条错误消息TypeError: Cannot read property '<any value in the image here>' of null

我的 Gatsby blog.js 页面中有以下查询

export const query = graphql`
  query BlogPageQuery {
    posts: allSanityPost(
      limit: 12
      sort: { fields: [publishedAt], order: DESC }
    ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
        alt
        asset {
      fluid(maxWidth: 1080) {
        ...GatsbySanityImageFluid
      }
  }
}
          title
          _rawExcerpt
          slug {
            current
          }
        }
      }
    }
  }
`

其结果被传递给负责生成博客网格的组件，如下所示

{data ? (
      <BlogPostPreviewGrid blogPosts={data} />
    ) : (
        <p>Could not get blog data</p>
      )
    }

BlogPostPreviewGrid 目前仅用于将数据传递给我的 BlogPostPreview 组件，如下所示

const BlogPostPreviewGrid = ({blogPosts}) => {
    return (
    <div>   

     {blogPosts.posts.edges.map (({ node }) => (
                <BlogPostPreview blogPosts={node} key={node.id}/> 

            ))}
    </div>
    )

}

我的完整 BlogPostPreview.js 组件看起来像这样

import React from "react"


function previewFunction(props) {
  return ( 
    <div>
    <h1>{props.blogPosts.title}</h1>
    {console.log(props.blogPosts)}
    {console.log(props.blogPosts.mainImage)}
  </div>
  )
}

const BlogPostPreview = props => {

  return (

    <>
          {props ? (
          previewFunction(props)
        ) : (
            <p>Failed to get blog data in blogPreview component</p>
          )
        }
    </>
  )
}
export default BlogPostPreview

使用 BlogPostPreview.js 中的 console.log 语句，我可以看到我所有的 blogpostdata 和 blogPosts.mainImage 数据。但是，如果我尝试在 mainImage 中调用某些内容，则会收到错误消息。

例子：

如果我尝试跑步

{console.log(props.blogPosts.mainImage.alt)}

请参阅随附的屏幕截图以查看{console.log(props)} devtools 的 Screensot 结果显示 console.log(props) 的结果

我的目标是能够像这样使用 gatsby Img 组件中的图像：

   <Img fixed={props.mainImage.asset.fixed}
          alt={props.mainImage.alt}

调用 blogPopsts.title 工作正常，因此运行没有问题并打印预期结果

<h1>{props.blogPosts.title}</h1>

谢谢大家的回复和评论！

编辑：我可以看到针对 mainImage 的 console.logs 的结果，但应用程序仍然崩溃。我还看到“关键”字段为空

标签： javascriptreactjsgatsby

javascript - Gatsby 应用程序崩溃并出现错误“无法读取属性”，即使可以在控制台记录属性

问题描述

解决方案

推荐阅读