Reactjs TypeError:无法读取属性'；棱镜'；未定义的

我正在使用Gatsby/GraphQL/Prismic进行一个项目。 当我试图使用GraphQL从Prismic API获取数据时，会出现这个错误

然而，当我在GraphiQL浏览器上查询请求时，它从API获取数据。 但当在组件内部使用它时，它会抛出错误

这是我的partners.js组件

import React, { Component } from 'react';
import { graphql } from 'gatsby';
import Swiper from 'react-id-swiper';

export const query = graphql`
    {
        prismic {
            allPartners {
                edges {
                    node {
                        name
                        description
                        image
                        _linkType
                    }
                }
            }
        }
    }
`;

export default class Partners extends Component {
    state = {
        partners: this.props.data.prismic.allPartners.edges
    };
    render() {
        console.log(this.state.partners);

        const params = {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        };
        if (this.state.partners) {
            return (
                <div>
                    <h1>Partners</h1>
                    <Swiper {...params}>
                        {this.state.partners.map((partner) => {
                            return (
                                <div>
                                    <img src={partner.node.title[0].text} />
                                </div>
                            );
                        })}
                    </Swiper>
                </div>
            );
        }
        return (
            <div>
                <h1>No partners</h1>
            </div>
        );
    }
}

我无法从盖茨比资料来源prismic graphql的github页面找到问题的答案。

---

有人面临同样的问题吗？

这里有几件事需要注意

• 为什么你还没有在盖茨比配置中创建任何页面
• 我认为语法不正确，因为类将如何接收道具和查询。我不确定是否有必要创建react类
• 在尝试检索查询数据之前添加一个返回null
• 如果错误已过时，请运行gatsby clean并重试。在错误中，表示您调用的值不正确：allServs而不是allPartners

---

1。因为我没有动态创建任何页面。但是我无法解决此问题。对我来说，唯一有效的方法就是从父页面组件查询数据，并将其作为道具传递给合作伙伴组件

require('dotenv').config({
    path: `.env`
});

module.exports = {
    siteMetadata: {
        title: `Gatsby Default Starter`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`
            }
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#663399`,
                display: `minimal-ui`,
                icon: `src/images/gatsby-icon.png` // This path is relative to the root of the site.
            }
        },
        {
            resolve: `gatsby-source-prismic-graphql`,
            options: {
                repositoryName: process.env.PRISMIC_REPOSITORY_NAME,
                accessToken: process.env.PRISMIC_ACCESS_TOKEN
            }
        }
    ]
};