我可以在一个容器组件中调用多个ajax请求吗？

Question

我可以在容器组件的 componentDidMount（）中调用多少个ajax请求，以使其顺利运行。并将数据倒入容器的render函数中的哑（表示）组件。

我的代码是否完全正确，或者我是否必须为ajax请求编写更多的容器组件并将数据分别分配给这些组件？

这是我的 容器组件 的代码：

export class MainPage extends PureComponent {
  componentDidMount() {
    this.props.loadCarousels();
    this.props.loadBanners();
    this.props.loadSidebars();
  }

  render() {
    
    const bannerItemsLoading = this.props.bannerItemsLoading;
    const carouselItemsLoading = this.props.carouselItemsLoading;
    const sidebarItemsLoading = this.props.sidebarItemsLoading;
    const bannerItems = [...this.props.bannerItems];
    const sidebarItems = this.props.sidebarItems;
    const carouselItems = [...this.props.carouselItems];
    console.log("Carousel", {"isLoading": this.props.carouselItemsLoading, "items": this.props.carouselItems });

    return (
      <Fragment>
        <Helmet>
          <title>Home Page</title>
          <meta name="description" content="Description of MainPage" />
        </Helmet>
        <MainSlider items={bannerItems} isLoading={bannerItemsLoading} />
        <GenericWrapper >
          <GenericTwoColWrapper 
            contentForCol8={<Carousel isLoading={carouselItemsLoading} items={carouselItems} />} 
            contentForCol4={<SideBarStatic2 isLoading={sidebarItemsLoading}
              most_recent={sidebarItems.most_recent} popular={sidebarItems.popular} sidebars={sidebarItems.sidebar} 
            />} 
          />
        </GenericWrapper>
      </Fragment>
    );
  }
}

MainPage.propTypes = {
  // dispatch: PropTypes.func.isRequired,
  bannerItems: PropTypes.any,
  bannerItemsLoading: PropTypes.bool,
  carouselItems: PropTypes.any,
  carouselItemsLoading: PropTypes.bool,
  sidebarItems: PropTypes.any,
  sidebarItemsLoading: PropTypes.bool,
  loadBanners: PropTypes.func,
  loadCarousels: PropTypes.func,
  loadSidebars: PropTypes.func
};

const mapStateToProps = createStructuredSelector({
  carouselItems: makeCarouselItemsSelector(),
  carouselItemsLoading: makeBannerItemsLoading(),
  sidebarItems: makeSidebarItemsSelector(),
  sidebarItemsLoading: makeSidebarItemsLoading(),
  bannerItems: makeBannerItemsSelector(),
  bannerItemsLoading: makeCarouselItemsLoading()
});

function mapDispatchToProps(dispatch) {
  return {
    loadBanners: () => dispatch(loadBanners()),
    loadCarousels: () => dispatch(loadCarousels()),
    loadSidebars: () => dispatch(loadSidebars()),
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'mainPage', reducer });
const withSaga = injectSaga({ key: 'mainPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(MainPage);