TypeError：无法读取未定义的属性“图像”-React 和 Gatsby答案

【问题标题】：TypeError: Cannot read property 'image' of undefined - React & GatsbyTypeError：无法读取未定义的属性“图像”-React 和 Gatsby
【发布时间】：2019-06-08 01:49:41
【问题描述】：

我目前正尝试在我的 react 应用程序中从 Contentful 中提取一些数据并不断收到此 TypeError: Cannot read property 'image' of undefined.

似乎不明白我为什么会这样。

这是我的查询组件 - 只是试图拉入文件名：

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'

export default () => (
  <StaticQuery
    query={graphql`
      query FileQuery {
        allContentfulImage {
          edges {
            node {
              image {
                file {
                  fileName
                }
              }
            }
          }
        }
      }
    `}
    render={data => (
      <div>
        <h1>{data.allContentfulImage.edges.node.image.file.fileName}</h1>
      </div>
    )}
  />
)

【问题讨论】：

标签： reactjs gatsby contentful

【解决方案1】：

data.allContentfulImage.edges 包含一个对象数组，而不是一个对象。你可以试试：

<h1>{data.allContentfulImage.edges[0].node.image.file.fileName}</h1>

【讨论】：