reactjs - 为什么我的 useState 不适用于我的 gatsby 网站？

Question

const IndexPage = () => {
  const metaData = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              name
            }
            html
          }
        }
      }
      site {
        siteMetadata {
          title
          locations
          profileIntroduction
        }
      }
    }
  `)

  const [reviewsArray] = useState(
    metaData.allMarkdownRemark.edges
  )

  const [currentReviewIndex, setCurrentReviewIndex] = useState(0)

  const [currentReview] = useState(
    reviewsArray[currentReviewIndex]
  )

  const increaseCurrentReview = () => {
    setCurrentReviewIndex(1)
  }

  return (
    <div>
        <Layout>
          <div 
          className='hero-image'
          style={{
            backgroundImage: `url(${heroImage1})`
          }}>
            <div className='home-hero-image-dark-cover'>
              <div className='home-hero-image-header'>
                {metaData.site.siteMetadata.title}
              </div>
              <div className='home-hero-image-header sub'>
                {metaData.site.siteMetadata.locations}
              </div>
            </div>
          </div>
          <div className='about-section'>
            <div className='about-section-image about-section-item'>
            </div>
            <div className='about-section-text about-section-item'>
              <div className='about-section-header'>
                {metaData.site.siteMetadata.title}
              </div>
              <p>
                {metaData.site.siteMetadata.profileIntroduction}
              </p>
            </div>
          </div>
          <div className='client-testimonials-section'>
            <div className='client-testimonials-section-dark-cover'>
              <button id='left-arrow' className='left-arrow arrow'>
                {'<'}
              </button>
              <div>
                <div className='client-testimonials-section-header'>
                  Client Testimonials
                </div>
                <div 
                className='client-testimonials-section-header review'
                dangerouslySetInnerHTML={{__html: currentReview.node.html}}
                >
                </div>
                <div className='client-testimonials-section-header review'>
                  - {currentReview.node.frontmatter.name}
                </div>
              </div>
              <button id='right-arrow' 
              className='right-arrow arrow' 
              onClick={increaseCurrentReview}>
                {'>'}
              </button>
            </div>
          </div>

如果它有所作为，我在控制台中也有一个错误：React-Hot-Loader: react--dom patch is not detected。React 16.6+ 的功能可能无法正常工作。否则我不知道为什么 useState 不能在这里工作。当然，我对 react 的 usestate 钩子不太熟悉，但一切似乎都在上升。

标签： reactjsgatsby