Javascript 如何在异步调用后呈现所有组件？

我是

React

新手，目前正在使用

Gatsby

设置我的第一个项目。基本上，我正在创建一个使用

Strapi

创建的

API

的网站。到目前为止，我希望使用如下API调用加载navbar项：

http://localhost:3001/sections

，其中对于部分，我指的是导航栏中的项目

为此，我定义了如下索引页：

import React from "react"
import Layout from "../components/layout/layout"
import SEO from "../components/layout/seo"
import BGTState from "../context/bgt/bgtState"

import "../styles/css/begreentannery.css"

const IndexPage = () => {
  return (
    <BGTState>
      <Layout>
        <SEO title="Home" />
      </Layout>
    </BGTState>
  )
}

export default IndexPage

问题在于上面的代码，本质上我调用了

useffect

hook，它从

API

抓取

部分。因此，在下载部分之前，我会停止代码，如下所示：

 return !loading ? (

这是
BGTState
中的
getSections（）
方法：

const getSections = async () => {
    try {
        setLoading()

        const res = await axios.get(
        `${process.env.API_URL}/sections?_sort=order:ASC`
        )

        dispatch({
        type: GET_SECTIONS,
        payload: res.data,
        })
    } catch (err) {
        dispatch({
        type: GET_SECTIONS,
        payload: err.response.msg,
        })
    }
}

在
索引
页面中，所有操作都正常，但问题在于
集合页面
，事实上我有以下结构：

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" })}`}
        />

        <CollectionState>
          <Collection id={1} />
        </CollectionState>
      </Layout>
    </BGTState>
  )
}
export default injectIntl(CollectionsPage)

产生该错误的原因：


当然，不会调用
getCollection
，并且会在
Collection
组件中生成其他错误

我如何重新审视这个机制？基本上，我必须：

加载所有部分
加载所有组件
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" })}`}
        />

        <CollectionState>
          <Collection id={1} />
        </CollectionState>
      </Layout>
    </BGTState>
  )
}
export default injectIntl(CollectionsPage)

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

  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