Question

我目前正在尝试从我的react应用程序中的Contentful中提取一些数据，并不断出现此TypeError：无法读取未定义的属性“ image”。

似乎看不出我为什么要这么做。

这是我的查询组件-只是尝试输入文件名：

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>
    )}
  />
)

Answer 1

data.allContentfulImage.edges包含对象数组，而不是对象。您可以尝试：

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

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

1 个答案: