Gatsby尝试使用静态que

Question

我尝试在Gatsby的react类组件中使用静态查询。

import * as React from "react"
    import '../styles/layout.scss'
    import Layout from '../components/layout'
    import { useStaticQuery, graphql } from 'gatsby'
    import { container } from '../styles/mystyles.module.scss'
    class IndexPage extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
           return  <Layout>
                <div>
                    <h1 className={container}>hello </h1>
                    <div>This is my container</div>
                </div>
            </Layout>
        }
    }
    const data = useStaticQuery(graphql`
        query HeaderQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `)
    
    export default IndexPage

我得到了错误

19:14错误反应钩子"useStaticQuery“不能在顶层调用。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks中调用

这是否意味着它是不可能的，它必须是一个功能组件？

Answer 1

问题是你试图在“顶层”调用一个函数(在函数外)，钩子只有在函数组件内部被调用时才起作用。例如：

const YourComponent = () => {
  const data = useStaticQuery(yourQuery)
}

如果您不想使用函数组件，您仍然可以使用StaticQuery高阶组件：

export default (props) => 
  <StaticQuery query={yourQuery}>
    {({ data }) => <SomeComponent {...data} {...props} />}
  </StaticQuery>

…或者像这样的…

class SomeComponent extends React.Component {
  render() {
    return (
      <StaticQuery query={yourQuery}>
        {({ data }) => <div>{data.site.title}</div>}
      </StaticQuery>
    )
  }
}