Gatsby 的 StaticQuery 不呈现任何内容

Question

我能够在控制台中记录数据，但 StaticQuery 完全没有呈现任何内容（甚至“你好”也不呈现）。

import React from "react";
import { graphql, StaticQuery } from "gatsby";

export default function Header() {
  return (
      <StaticQuery
        query={
          graphql`
          {
            allStrapiPage {
              nodes {
                id
                publishedAt
                slug: Slug
                title: Titulo
                body: Corpo {
                  Titulo
                  Texto {
                    data {
                      text: Texto
                    }
                  }
                }
              }
            }
          }
        `
        }
        render={data => {
          <header>
            <h1>Hello</h1>
            <h1>{console.log(data)}</h1>
          </header>
        }}
      />
  )
}

这是我的 index.jsx:

import * as React from "react"
import Header from "../components/Header"

const IndexPage = () => {
  return (
    <main>
      <Header />
    </main>
  )
}

export default IndexPage

我已经尝试删除 node_modules 并使用不同的包管理器重新安装它。

Answer 1

你需要return里面的语句：

render={data => {
  return <header>
    <h1>Hello</h1>
    <h1>{console.log(data)}</h1>
  </header>
}}

或使用隐式 return:

render={data => (
  <header>
    <h1>Hello</h1>
    <h1>{console.log(data)}</h1>
  </header>
)}

Gatsby 的 StaticQuery 不呈现任何内容

Gatsby's StaticQuery renders nothing

javascript

reactjs

gatsby

ssg