在函数中调用React Hook，该函数既不是React函数组件，也不是自定义的React Hook函数

Question

我的blog.js组件：

import {useStaticQuery, graphql} from "gatsby"


const blog = () => {
    const {site} = useStaticQuery(
        graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
    )
    return site.siteMetadata
}

export default blog

Gatsby文档：https://www.gatsbyjs.org/docs/use-static-query/

我已尝试解决此问题！！

有什么解决方案吗？

谢谢

Answer 1

大写您的组件名称

import {useStaticQuery, graphql} from "gatsby"


const Blog = () => {
  const {site} = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return site.siteMetadata
}

export default Blog

User-Defined Components Must Be Capitalized

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在使用JSX之前将其分配给大写变量。