javascript - 等待子组件获取数据，然后渲染

Question

我有一个 React 应用程序，它在不同组件中使用多个 fetch 调用。在主页组件中，我导入了较小的组件，它们都有自己的 fetch 调用。

render() {
   return (
      <React.Fragment>
        <Banner/>
        <Services />
        <About />
      </React.Fragment>
    )
}

Banner、Services 和 About 对不同的端点有自己的 fetch 调用，现在我的问题是因为响应有点慢，如何等待所有子组件获取数据，然后渲染 Homepage 组件。我曾尝试将 isLoading 的状态放入并添加一个加载器以等待组件获取，但我不知道要等待什么才能将 isLoading 设置为 false。

Answer 1

...how to wait for all of the child components to fetch data, then render the Homepage component

你没有。相反，您将 fetches 移动到 Homepage 组件的父级，然后让该父级仅在 Homepage 组件拥有所有必要信息时才呈现该组件。用 React 的说法，这是“ lifting state up”(例如，向上到父级的层次结构)。

虽然您可以以“正在加载”的形式呈现主页，并让其以“正在加载”的形式呈现其子组件，并让子组件回调主页以说他们现在拥有自己的信息，但这比只需将状态提升到实际需要它的最高组件(因此它知道它可以呈现主页)。