javascript - Gatsby 应用程序崩溃并出现错误 'Cannot read property'，即使可以在控制台记录属性

Question

我正在尝试使用 Gatsby 的 headless 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)} 的结果
Screensot of devtools showing results of 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 的结果，但应用程序仍然崩溃。我还看到“关键”字段为空

Answer 1

当您尝试访问的数据的至少一个实例不存在于 cms 中时，这通常是一种情况。我们使用的一种解决方法是在 cms 中创建占位符/虚拟数据。另一个是使用 Gatsby.js 模式自定义设置默认/回退模式(有关更多信息，请参阅他们的文档。)

还要确保您单击了在您使用的任何 headless cms 中发布。例如，当我忘记单击 cms 中的“发布”时，我遇到了这个问题。所以内容处于草稿模式， Gatsby 将无法获取数据。