React组件呈现两次，useEffect未触发

Question

我正在使用React + Gatsby，这是我的第一个React项目。对于一个被调用两次的组件，我遇到了一些问题，而且我添加到这个组件中的useEffect钩子根本没有触发。

到目前为止，我已经创建了一个名为CollectionsPage的页面

import React from "react"
import { injectIntl } from "gatsby-plugin-intl"
import Layout from "../components/layout/layout"
import SEO from "../components/layout/seo"
import BGTState from "../context/bgt/bgtState"
import CollectionState from "../context/collection/collectionState"
import Collection from "../components/collection"

const CollectionsPage = ({ intl }) => {
  return (
    <BGTState>
      <Layout>
        <SEO
          lang={intl.locale}
          title={`${intl.formatMessage({ id: "collections" })}`}
        />
        {console.log("hey there")}
        <CollectionState>
          <Collection id={1} />
        </CollectionState>
      </Layout>
    </BGTState>
  )
}
export default injectIntl(CollectionsPage)

当我浏览站点到http://localhost:3001/collections时，我会在控制台中打印：

hey there
true
true

现在，第一个日志hey there来自CollectionsPage，而true日志是从调用两次的Collection组件中打印出来的。

这是我的Collection组件

import React, { useContext, useEffect } from "react"
import CollectionContext from "../context/collection/collectionContext"
import { Link } from "gatsby"

const Collection = ({ id }) => {
  const collectionContext = useContext(CollectionContext)
  const { loading, collection, getCollection } = collectionContext

  console.log(true)

  useEffect(() => {
    getCollection(id)
  }, [])

  if (loading) return React.Fragment

  return (
    <div className="container">
      <div className="row">
        <img
          src={`${process.env.API_URL}${collection.feature_media.url}`}
          className="w-100 mt-2 mb-2"
          alt={""}
        />
        <Link to="#" className="bg-caption bg-no-underline">
          fall/winter 20/21
        </Link>
      </div>
    </div>
  )
}

export default Collection

现在，这种行为似乎只发生在CollectionsPage中，而不是在Index页面中，这让我感到非常困惑。这是Layout组件，它将页面上的所有内容包装起来：

import React, { useContext, useEffect } from "react"
import PropTypes from "prop-types"
import { injectIntl } from "gatsby-plugin-intl"
import BGTContext from "../../context/bgt/bgtContext"
import { Spinner } from "react-bootstrap"
import Footer from "./footer"
import SearchState from "../../context/search/SearchState"
import Search from "../../components/search"

import NavbarMobile from "../../components/layout/navbarMobile"
import NavbarDesktop from "../../components/layout/navbarDesktop"

const Layout = ({ children, intl }) => {
  const bgtContext = useContext(BGTContext)
  const { loading, getSections, sections } = bgtContext

  useEffect(() => {
    getSections()
  }, [])

  return !loading ? (
    <>
      <NavbarMobile sections={sections} />
      <NavbarDesktop sections={sections} />
      <SearchState>
        <Search />
        <div className="container-fluid">
          <div className="main">
            {children}
            <Footer />
          </div>
        </div>
      </SearchState>
    </>
  ) : (
    <div className="container" style={{ height: "100vh" }}>
      <div className="row h-100 justify-content-center align-items-center">
        <Spinner animation="grow" />
      </div>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default injectIntl(Layout)

正如您在这里看到的，我必须从一个API中获取这些部分，然后，我可以稍后呈现所有内容。也许这个机制造成了问题？

事实上，在Collection组件中，我有另一个名为getCollection的钩子useEffect，问题是这个钩子从未被触发，而且collection也是未定义的。

我能做些什么来解决这个问题？

Answer 1

首先，如果您希望您的console.log打印一次，那么在useEffect(在集合文件中)中打印您的console.log。如果您想查看您的collection值是否正在被更改，请这样做：

useEffect(()=>{
console.log(collections);
},[collections])

每当您的集合值发生变化时，这个useEffect就会出现在图片中。