reactjs - TypeError：无法读取未定义的属性“棱镜”

Question

我正在使用 Gatsby/GraphQL/Prismic 开发一个项目。当我尝试使用 GraphQL 从 Prismic API 获取数据时，会弹出此错误。

但是，当我在 GraphiQL 浏览器上查询请求时，它会从 API 获取数据。但是在 Component 中使用它时会抛出错误。

这是我的合作伙伴.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>
        );
    }
}

这是我的 gatsby-config.js

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
            }
        }
    ]
};

我无法从 gatsby-source-prismic-graphql 的 github 页面找到我的问题的解决方案。有人遇到同样的问题吗？

Answer 1

这里有几点需要注意。

• 为什么你还没有在你的 gatsby-config 中创建任何页面？
• 我认为语法不正确，因为班级将如何接收道具和查询。我不确定创建一个反应类是必要的
• 在尝试检索查询的数据之前添加返回 null
• 您遇到的错误已过时，请运行gatsby clean 并重试。在错误中说您调用的值不正确：allServs而不是allPartners。