与Gatsby JS和Contentful结合使用的页面，如何导入我的第一个简单字符串 [英] Onepage with Gatsby JS and Contentful, how to import my first simple string

问题描述

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

I am trying to useStatic Query and GraphQL to get a simple title from Contentful, pass it to state and then show in the render. I cant make it work. I am attaching an image showing my current setup and errors.

可能的问题:1.查询返回一个数组，我需要将其更改为第一个字符串或访问0元素，因为我的内容类型只是一个，因为它是一页.

Possible problems: 1. the query returns an array, and I need to change it into a string, or access 0 element, the first one, because my content type is just one, as it is a onepage.

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

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

For comparison: in the screen from my file you can see a variable name showing Josh Perez, when I uncomment it and add it to this.state = { dataTest: name}, then in RENDER: this.state.dataTest returns the name Josh Perez well, so passing a variable to state works, but passing a string from graphql query is not possible for me...

我有一个限制，那就是我需要使用一个类来创建页面组件，因为事实是在Component中确实挂载了我要放置一些对我来说很好的JQuery.

I have a limitation which is that I need to create my page component with a class, because of the fact that in the Component did mount I am placing some JQuery, which works well for me.

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

THIS IS MY TEST CODE 1. In Constructor

class IndexPage extends React.Component {

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




    this.state = { dataTest: name };




}

1. 渲染中

1. In render

这有效，将变量名传递给state并在render中显示.

This works, the variable name is passed to state and shown in render.

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

However, I want to show in this way a simple text string from Contentful. So I am trying code like this (error message is shown in the screens):

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 };

事实证明，以下建议的解决方案有效.我放在下面 我尝试调用其他内容.这没用.它显示以下错误无法读取未定义的属性'map'".我将非常感谢您提出一个建议，以期对其进行改进，使其有效.

It turns out, that the below suggested solution works. I am putting below my attempt at callingfurther content. It does not work. It displays the following error "Cannot read property 'map' of undefined". I would be very grateful for a suggestion how to improve it, how to make it work.

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
        }
      }
    }
  }
}
`

推荐答案

如果您将页面组件作为一个类编写，则无需使用UseStaticQuery，则可以使用简单的 PageQuery . 要遍历数组， map()方法也可以使用.

If you're writing a page component as a class, you don't need to use the UseStaticQuery, you can use the simple PageQuery for this purpose. To loop through arrays, the map() method works as well.

更新

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
      }
    }
  }
}
`

发生了什么事

1. 您正在使用的GraphQL查询从Contentful中获取所需的数据；
2. React状态状态组件(类Test)正在以破坏作业;
3. 我们正在通过map方法访问数据节点(我建议您看一下；
4. JSX 中的花括号允许您使用JS来操纵自己的内容想要-在这种情况下，呈现信息.

1. The GraphQL query you're using is bringing the data you want from the Contentful;
2. The React Stateful Component (class Test) is receiving all the data available from the query as a prop;
3. We're accessing this data on the render() method using the destructing assignment;
4. we're accessing the data nodes through the map method (the one I suggested you to take a look;
5. The curly braces into the JSX allows you to use JS to manipulate what you want - In this case, to render the information.

这篇关于与Gatsby JS和Contentful结合使用的页面，如何导入我的第一个简单字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！