无法读取未定义的属性（正在读取 'props'）- Gatsby 网站上的 Rich Text

Question

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

我要添加一张卡片，其中包含 post 的姓名、职位、日期和简短的 post 文本。在这种情况下，我重置了富文本格式，使其表现得像普通文本。

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

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

如有遗漏，请告知。

Answer 1

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

const AktualnosciPage = ({ data }) => {}

您正在 props.data 直接使用 { data }

另外，因为你是在非class基础组件中（你使用的是功能组件），this的使用受到严格限制。

你应该直接做：

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

正如你在上面的行中所做的那样 data.allContentfulArtykul.edges.

要获得更简洁的方法，您还可以这样做：

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

无法读取未定义的属性（正在读取 'props'）- Gatsby 网站上的 Rich Text

Cannot read properties of undefined (reading 'props') - Rich Text on Gatsby website

javascript

richtext

reactjs

graphql

gatsby