Question

我的其中一个页面出现加载缓慢的问题。该页面包含一个“根”组件-我们称之为Container。

“我的容器”从下拉列表中选择值后进行了2次fetch调用。提取的数据（A和B）传递到子组件（Board）。

董事会是由2个不相关的组件-Player和Item构建的，它们分别使用A和B作为初始数据。

碰巧Player的渲染过程比Item的渲染过程繁重。

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

我希望同时看到两个渲染-如何实现？

我猜这应该由Board完成，但是如何做？

同样重要的是，每次“更改”下拉列表中的值时都会进行“等待”（始终在该位置供用户选择）。

谢谢！

Answer 1

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

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 ....

您可以填写详细信息

仅当所有子组件都完成渲染时，ReactJS才会渲染组件

1 个答案: