我如何将graphQL查询变成反应组件？

Question

在我的gatsby项目中，特别是在gatsby-config.js中，有一个特定的对象数组，称为menuLinks

siteMetadata: {
title: `Gatsby Default Starter`,
description: `The official Flight Log and utility tool for the CF`,
author: `Tristan Rebello`,
menuLinks: [
  {
    name: "CF FLight Log",
    link: "/",
  },
  {
    name: "Crew Quarters",
    link: "/page-2",
  },
],
},

我正在尝试从头开始实现自己的导航栏。现在，导航栏仅包含两个页面CF Flight Log和Crew Quarters。下面的graphQl查询提取menuLinks数组，其中包含我页面的信息（名称和链接）。

/*links.js*/
import { graphql, useStaticQuery } from "gatsby"

const {
  site: {
    siteMetadata: { menuLinks },
  },
} = useStaticQuery(
  graphql`
    query {
      site {
        siteMetadata {
          menuLinks {
            link
            name
          }
        }
      }
    }
  `
)

export default menuLinks

以上，menuLinks数组包含两个链接对象。我想将menuLinks用作可导出对象，以在第10行的其他组件中进行引用：

/*index.js*/
import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import menuLinks from "../components/links"

const IndexPage = () => (
  <Layout title={menuLinks[0]} subpage=menuLinks[1]>
    <SEO title="Home" />
    <h2>Welcome To The Official Flight Log of 3/1 </h2>
    <p>Here you can easily log your in-game flight hours</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

但是，当我在本地主机上运行应用程序时，得到以下Error

现在，错误表明我的links.js文件使用了名为useStaticQuery的钩子。我如何将存储在menuLinks中的查询转换为React组件，but仍然能够将其用作可索引数组，就像第10行的index.js中一样>>

在我的gatsby项目中，尤其是在gatsby-config.js中，我有一个名为menuLinks siteMetadata的特定对象数组： [

useStaticQuery是自定义的React hook，它打算在功能组件的定义中使用。即：

您不能在组件定义之外使用钩子

，这就是错误告诉您的内容。该挂钩将在每次安装组件时加载一次数据，因此，如果要避免对API造成不必要的影响，可以在父组件中获取该数据并将其传递给子组件：

const SomeComponent = _props => {
  const data = useStaticQuery(someQuery)

  return (
    <>
      <ComponentA data={data} />
      <ComponentB data={data} />
    </>
  )
}

这可能是一个好的解决方案，也可能不是，这就是我们所说的“属性钻探”，因为您必须通过任意数量的嵌套组件来钻取一些值。
“钻探”问题的可能解决方案可能是引入某种全局状态。使用React Contexts是一种很好的轻量级方法。

Answer 1

useStaticQuery是自定义的React hook，它打算在功能组件的定义中使用。即：

您不能在组件定义之外使用钩子