使用 Gatsby JS 和 Contentful 的 Onepage，如何导入我的第一个简单字符串

Question

我正在尝试使用静态查询和 GraphQL 从内容丰富，将其传递给状态，然后在渲染中显示。我不能让它工作。我附上一张显示我当前设置和错误的图片。

可能遇到的问题： 1.查询returns一个数组，我需要把它改成字符串，或者访问第0个元素，第一个，因为我的content type只是一个，就这样一页。

在组件中放置查询，我不确定它是否可以在组件的构造函数中

为了比较：在我的文件的屏幕上，您可以看到一个显示 Josh Perez 的变量名称，当我取消注释并将其添加到 this.state = { dataTest: name} 时，然后在 RENDER 中：this.state.dataTest returns Josh Perez 这个名字很好，所以将变量传递给 state 是可行的，但是从 graphql 查询传递字符串对我来说是不可能的...

我有一个限制，那就是我需要使用 class 创建我的页面组件，因为事实上在组件中我放置了一些 JQuery，效果很好对我来说。

这是我的测试代码 1.在构造函数中

class IndexPage extends React.Component {

constructor(props) {
    super(props);
    // this.state = { data: null };
    const name = 'Josh Perez';




    this.state = { dataTest: name };




}

渲染中

{this.state.dataTest}

这有效，变量名称被传递到状态并在渲染中显示。

但是，我想以这种方式显示来自 Contentful 的简单文本字符串。所以我正在尝试这样的代码（错误消息显示在屏幕上）：

class IndexPage extends React.Component {

constructor(props) {
    super(props);
    // this.state = { data: null };
    //const name = 'Josh Perez';
    const data = useStaticQuery(graphql`
    query {
        allContentfulHomepage (limit: 1) {
          edges {
            node {
              section1Title
            }
          }
        }

      }
    `)


    this.state = { dataTest: data };

事实证明，下面建议的解决方案有效。我在下面我试图调用更多内容。这是行不通的。它显示以下错误 "Cannot read property 'map' of undefined"。如果能提出如何改进它、如何让它发挥作用的建议，我将不胜感激。

export default class Test extends Component {
    state = {
 dataTest: this.props.data.test.edges.map(({ node: test }) => 
 test.section1Title),
 dataTest2: this.props.data.test.edges.map(({ node: test }) => 
 test.section2Lead),
 dataTest3: this.props.data.test.edges.map(({ node: test }) => 
 test.section1Text.json)

    }

    render() {
        return <div>
            <h1>{this.state.dataTest}</h1>
            <h1>{this.state.dataTest2}</h1>
            {documentToReactComponents(this.state.dataTest3)}
        </div>
    }
}

export const query = graphql`
{
  test:allContentfulHomepage(limit: 1) {
    edges {
      node {
        section1Title
        section2Lead
        section1Text {
            json
        }
      }
    }
  }
}
`

Answer 1

如果您将页面组件编写为 class，则不需要使用 UseStaticQuery，您可以为此使用简单的 PageQuery。要遍历数组，map() 方法也可以。

更新

import React, { Component } from 'react';
import { graphql } from 'gatsby';

export default class Test extends Component {
  render() { 

  const { edges } = this.props.data.test;

    return (
     <div>
      {edges.map(({ node: itemFromContentful }) => (
          <h1>{itemFromContentful.section1Title}</h1>
          <h1>{itemFromContentful.section2Lead}</h1>
          {documentToReactComponents(section1Text.json)}
      ))}
     </div>
    );
  }
}

export const query = graphql`
{
  test:allContentfulHomePage(limit: 1) {
    edges {
      node {
        section1Title
      }
    }
  }
}
`

发生了什么：

您正在使用的 GraphQL 查询正在从 Contentful 获取您想要的数据；
React 有状态组件（class 测试）正在接收查询中的所有可用数据作为 prop;
我们正在使用 destructing assignment;
我们正在通过 map 方法访问数据节点（我建议您看一下；
把花括号放到JSX中可以让你用JS来操纵你想要的东西——在这种情况下，渲染信息。

使用 Gatsby JS 和 Contentful 的 Onepage，如何导入我的第一个简单字符串

Onepage with Gatsby JS and Contentful, how to import my first simple string

javascript

reactjs

gatsby

{this.state.dataTest}