无法读取未定义的属性（读取“道具”）-盖茨比网站上的富文本

Posted 2023-03-08

【中文标题】无法读取未定义的属性（读取“道具”）-盖茨比网站上的富文本

【英文标题】：Cannot read properties of undefined (reading 'props') - Rich Text on Gatsby website

【发布时间】：2022-01-21 00:12:26

【问题描述】：

我正在编写一个显示当前帖子的页面，我使用 Contentful CMS 并获取 GraphQl API。我在内容模型中有普通字符串类型，但最后一种是富文本。

我将添加一张卡片，其中包含帖子的名称、标题、日期和简短的帖子文本。在这种情况下，我重置了富文本格式，使其表现得像普通文本。

当我尝试在组件中添加常规字符串列表时，一切正常，但是当我添加带有富文本渲染的函数时，它返回错误：

Cannot read properties of undefined (reading 'props')

我尝试了不同的方法来做到这一点，但仍然无法正常工作。我想组合一个获取普通字符串的查询和另一个获取原始富文本并呈现富文本而不格式化

的查询

从视觉上看，列表应如下所示：

我在 Gatsby 中显示的错误如下所示：

最后，我想向您展示，最重要的是 - 我的代码：

import React from "react"
import  graphql  from 'gatsby'
import  BLOCKS, MARKS  from "@contentful/rich-text-types"
import  renderRichText  from "gatsby-source-contentful/rich-text"

import Layout from "../components/base/layout"

import 
  PageWrapper,
  BlogCardWrapper,
  BlogCardElement,
  ThumbnailImage,
  ContentInlineWrapper,
  PreContentParagraph,
  ReadMoreParagraph,
  BlogTitleHeader,
  BlogDateParagraph,
 from "../styles/aktualnosci.style"

import  Headers  from "../utils/data/headersData"
import H1 from "../components/headers/h1"

const AktualnosciPage = ( data ) => 

  const articles = data.allContentfulArtykul.edges
  const post = this.props.data.allContentfulArtykul.edges[0].node.content

  const option = 
    renderNode: 
        [BLOCKS.EMBEDDED_ASSET]: node => 
            return <img/>
        ,
        [BLOCKS.HEADING_1]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
        [BLOCKS.HEADING_5]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
        [BLOCKS.PARAGRAPH]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
        [BLOCKS.QUOTE]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
        [BLOCKS.UL_LIST]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
        [BLOCKS.LIST_ITEM]: (node, children) => 
            return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
        ,
    ,
    renderMark: 
        [MARKS.BOLD]: (node, children) => 
            return <p style=fontWeight: '100'>children</p>
        ,
    
  

  const output = renderRichText(post, option)

  return (
    <Layout>
      <PageWrapper>
        <H1 name= Headers.Aktualnosci />
        <BlogCardWrapper>
            articles.reverse().map((node) => 
                return (
                  <div key=node.slug>
                    <a href="/aktualnosci/" + node.slug>
                      <BlogCardElement>
                        <ThumbnailImage
                          className="j10_dfg4gvBDG"
                          src=node.thumbnailPhoto.fluid.src
                          srcSet=node.thumbnailPhoto.fluid.srcSet
                        />
                        <ContentInlineWrapper>
                          <BlogTitleHeader>node.title</BlogTitleHeader>
                          <PreContentParagraph>output</PreContentParagraph>
                          <BlogDateParagraph>node.createdAt</BlogDateParagraph>
                        </ContentInlineWrapper>
                        <ReadMoreParagraph className="j5_dfg4gvBDG">Czytaj więcej <span style=color: '#BF1E2D', fontSize: '11px'>&#10148;</span></ReadMoreParagraph>
                      </BlogCardElement>
                    </a>
                  </div>
                )
            )
        </BlogCardWrapper>
      </PageWrapper>
    </Layout>
  )


export const query = graphql`
    query 
      allContentfulArtykul 
        edges 
          node 
            id
            thumbnailPhoto 
              fluid 
                src
                srcSet
              
            
            title
            slug
            content 
              raw
              references 
                ... on ContentfulAsset 
                  __typename
                  contentful_id
                  fixed(width: 200) 
                    src
                    srcSet
                  
                
              
            
            createdAt(formatString: "YYYY-MM-DD")
          
        
      
    
`

export default AktualnosciPage

如果有什么遗漏，请告诉我。

【问题讨论】：

const post = this.props.data 不应该只是data？因为你在const AktualnosciPage = ( data ) 解构它。此外，请注意 this 对象。在函数组件上，它的工作方式与 Class 组件不同（我不知道您是否对此感到困惑）。在这里阅读更多； How does the "this" keyword work?

【参考方案1】：

您正在对组件声明中的查询数据进行解构：

const AktualnosciPage = ( data ) => 

您正在使用props.data 直接与 data

另外，因为你是在一个非基于类的组件中（你正在使用一个函数式组件），所以this的使用受到严格限制。

你应该直接做：

  const post = data.allContentfulArtykul.edges[0].node.content

正如您在上面的行中所做的那样，使用data.allContentfulArtykul.edges。

对于更简洁的方法，您还可以这样做：

  const articles = data.allContentfulArtykul.edges
  const post = articles[0].node.content