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

您不需要。相反，您将获取的内容移至 Homepage 组件的父级，然后让该父级仅在拥有所有必要信息时才渲染 Homepage 组件。在 React 术语中，这是“ 提升状态 ”（例如，沿层次结构向上到父级）。

虽然您 可以 以“加载”形式渲染 Homepage，并让它以“加载”形式渲染其子组件，然后让子组件回调到 Home 页面以表示它们现在拥有了信息，但这比简单地将状态提升到实际需要它的最高组件（这样它就知道它可以渲染 Homepage）要复杂得多。

正如@TJCrowder 在他的回答中提到的，您需要提升您的状态并将其保留在父组件中。在那里发出网络请求并将数据作为 props 传递给您的子组件。您可以在 此处 阅读有关 Lifting-state-up 的更多信息

class YourComponent extends React.Component {
  state = {isLoading: true, isError: false, banner: null, services: null, about: null};

  async componentDidMount() {
     try {
        const [banner, services, about] = await Promise.all([
           // all calls
        ]);
        this.setState({ isLoading: false, banner, services, about });
     } catch (error) {
        this.setState({ isError: true, isLoading: false });
     }

  }

  render() {
     if (this.state.isLoading) {
        return <div>Loading...</div>
     }

     return (
        <React.Fragment>
           <Banner data={this.state.banner} />
           <Services data={this.state.services} />
           <About data={this.state.about} />
         </React.Fragment>
       )
   }
}

如所建议的那样，使用 fetch 中的 promise，您可以让 isLoaded 属性状态确定组件是否应该渲染。

class ShouldRender extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    }
  }

  componentDidMount() {
    fetch('http://someresource.com/api/resource')
      .then(res => res.json())
      .then(data => {
        this.state({
          data,
          isLoaded: true,
        });
      })
  }

  render() {
    const { isLoaded } = this.state;
    if (isLoaded) {
      return <MyAwesomeReactComponent />
    }
    return null;
  }
}

因此，一旦状态更新，它将触发使用新状态重新渲染组件，这将使 if 语句为 true，并且您的 JSX 将会出现。