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

Question

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

我在我的盖茨比博客.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

使用控制台.log BlogPostPreview 中的语句.js我可以看到我所有的 blogpost 数据和 blogPosts.mainImage 数据。但是如果我尝试在主图像中调用某些内容，则会出现错误。

例：

如果我尝试运行

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

请参阅随附的屏幕截图以查看{console.log(props)}的结果 显示控制台结果的开发工具的屏幕.log(道具(

我的目标是能够像这样使用盖茨比 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模式自定义设置默认/回退模式(有关更多信息，请参阅他们的文档(。

还要确保您单击了在您正在使用的任何无头 CMS 中发布的发布。 例如，当我忘记单击cms中的"发布"时，我遇到了这个问题。 因此，内容处于草稿模式，盖茨比将无法获得数据。