时间戳

首页 > 解决方案 > Reactjs 仅在其所有子组件完成渲染时才渲染组件

javascript - Reactjs 仅在其所有子组件完成渲染时才渲染组件

问题描述

我的一个页面中有一个“缓慢”的加载问题。该页面包含一个“根”组件——我们称之为它Container。

我的容器对fetch下拉列表中的值选择进行了 2 次调用。获取的数据 (A和B) 被传递给子组件 ( Board)。

Board 由 2 个不相关的组件构成 -它们分别使用Player和作为初始数据。ItemAB

碰巧Players 渲染过程比Item's 重得多。

结果是 Item 在页面上呈现，几秒钟后 Player 也被呈现。

我的愿望是同时看到两个渲染 - 我怎样才能实现呢？

我想这是应该做的，Board但是怎么做呢？

同样重要的是，每次下拉列表中的值更改时都会发生这种“等待”（它总是供用户选择）。

谢谢！

标签： javascriptreactjs

解决方案

有几种方法可以做到这一点。

1）使用graphql来编排数据的加载，使得页面在所有数据都可用时渲染

2) 设置 playerDataReady 和 itemDataReady 的状态值。如果其中任何一个为假，则显示加载微调器。当它们都为真时（由于 ajax 调用被解析），那么渲染将同时进行

在构造函数中...

  state = {
    playerDataReady: false,
    itemDataReady: false,
  }

   :
   :
componentDidMount() {
// Request player data, using axios or fetch
   axios.get(...)
   .then(data) {
     this.data = data
     this.setState({playerDataReady:true})
   }
// Do the same for your item data (and update itemDataReady)
}

在您的渲染功能中：

render() {
  if (!playerDataReady || !itemDataReady) {
    return <Loader/>
  //  The data has arrived, so render it as normal...
    return ....

您可以填写详细信息

推荐阅读