Question

我正在使用Netlify CMS + Gatsby创建网站。我已经拥有Netlify中的站点结构和一些数据，但我在将数据导入Gatsby时遇到了一些问题。这是我到目前为止所得到的

＆＃13;

import React from 'react'

export default class IndexPage extends React.Component {
  render({data}) {
    const { edges: posts } = data.allMarkdownRemark

    return (
      <section className="section">
        <div className="container">
          <div className="content">
            <h1 className="has-text-weight-bold is-size-2"></h1>
          </div>
        </div>
      </section>
    )
  }
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(filter: {frontmatter: {templateKey: {regex: "/home-page|media-page/"}}}) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
          }
        }
      }
    }
  }
`

＆＃13;

我收到TypeError：无法读取属性＆＃39;数据＆＃39;未定义的

Answer 1

props不会作为参数传递给渲染。

<强>尝试：

import React from 'react'

export default class IndexPage extends React.Component {
  render() {
    const { edges: posts } = this.props.data.allMarkdownRemark

    return (
      <section className="section">
        <div className="container">
          <div className="content">
            <h1 className="has-text-weight-bold is-size-2"></h1>
          </div>
        </div>
      </section>
    )
  }
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(filter: {frontmatter: {templateKey: {regex: "/home-page|media-page/"}}}) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
          }
        }
      }
    }
  }
`

Answer 2

这种语法是解构：

render({ data })

这与此相似：

render(props) {
  data = props.data
}

您遇到的问题是render没有收到任何参数/道具。

解决方案是使用this.props，这是@talves的回答所建议的。

从Netlify CMS获取数据到Gatsby JS

2 个答案: