TypeError: невозможно прочитать свойство image of undefined - React & Gatsby

В настоящее время я пытаюсь получить некоторые данные из 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>
    )}
  />
)
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 617
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

data.allContentfulImage.edges содержит массив объектов вместо того, чтобы быть объектом. Можешь попробовать:

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

Другие вопросы по теме