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

Posted 2023-03-08

【中文标题】TypeError：无法读取未定义的属性“棱镜”

【英文标题】：TypeError: Cannot read property 'prismic' of undefined

【发布时间】：2020-03-13 03:08:17

【问题描述】：

我正在使用 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 页面找到我的问题的解决方案。 有人遇到同样的问题吗？

【参考方案1】：

这里有几点需要注意。

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

gatsby clean

并重试。在错误中表示您调用的值不正确：allServs 而不是 allPartners。

【讨论】：

1.因为我没有动态创建任何页面。

但是我无法解决这个问题。唯一对我有用的是我只是从父页面组件中查询数据并作为道具传递给合作伙伴组件