反应组件状态为空盖茨比

Question

我遇到的问题是组件中的状态为 null 并且导航菜单中的滚动不起作用。我认为问题出在 Scrollto 组件中，但仍然不知道如何解决它。这是一个导航列表，应该从部分列表中获取数据，并在单击所选部分后平滑滚动。 如果有更好的方法来实现我的代码，我会很高兴听到。

导航菜单组件

import React, { useState } from "react"
import scrollTo from "gatsby-plugin-smoothscroll"
import Scrollspy from "react-scrollspy"
import { useSiteMetadata } from "../hooks/use-site-metadata"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faBars } from "@fortawesome/free-solid-svg-icons"

export default function () {
  const [isVisible, setVisibility] = useState(false)

  const { menuItems } = useSiteMetadata()

  let showStyle = null
  if (isVisible) {
    showStyle = { transform: "scaleY(1)" }
  } else {
    showStyle = null
  }

  return (
    <nav className="nav">
      <button
        className="btn-tog"
        id="toggle-btn"
        href="/#"
        title="Menu"
        onClick={() => setVisibility(!isVisible)}
      >
        <FontAwesomeIcon icon={faBars} />
      </button>

      <Scrollspy
        className=" nav-ul navList list flex"
        style={showStyle}
        items={menuItems.map(a => a.path)}
        currentClassName="current"
        offset={-100}
      >
        {menuItems.map((value, index) => {
          return (
            <li className="mr3" key={index}>
              <button
                onClick={() => 
                  {
                  scrollTo("#" + value.path)
                  setVisibility(0)
                }}
              >
                {value.label}
              </button>
            </li>
          )
        })}
      </Scrollspy>
    </nav>
  )
}

使用站点元数据

import { useStaticQuery, graphql } from "gatsby"
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query MyQuery {
        site {
          siteMetadata {
            title
            description
            author {
              name
            }
            sections
            favicon
            logo
            menuItems {
              path
              label
            }
          }
        }
      }
    `
  )
  return site.siteMetadata
}

存储数据

module.exports = {
  siteMetadata: {  
    /* Choose and arrange the sections to be displayed on the landing page */
    sections: [`hero`, `about`, `mappingItems`, `contact`],

    /* Configure the navigation menu */
    menuItems: [
      { path: "hero", label: "Home" },
      { path: "about", label: "About" },
      { path: "mappingItems", label: "MappingItems" },
      { path: "contact", label: "Contact" },
    ],

index.js

import React from "react"
import Layout from "../components/layout"
import Hero from "./Hero"
import About from "./about"
import Contact from "./contact"
import MappingItems from "./mappingItems"




import { useSiteMetadata } from "../hooks/use-site-metadata"

export default () => {
  const { sections } = useSiteMetadata()
  const availableSections = {
    hero: Hero,
    about: About,
    mappingItems: MappingItems,
    contact: Contact,
  }

  return (
    <>
      <Layout>
        {sections.map(section => {
          let Tagname = availableSections[section]
          return <Tagname />
        })}
      </Layout>
    </>
  )
}

Answer 1

问题在于它应该位于具有相同 id 的 availableSections 包装部分中的部分（组件）中。