如何在所有數據可用時渲染GUI？

Question

在我的if語句中的一切都是我從API獲取的數據。如果我不把這個if語句檢查是否存在..我得到一個錯誤，說道具是未定義的..如果我把if語句先檢查數據是否正確，那麼它不會呈現。

我知道數據是正確的，因爲如果我在renderWhenDataisAvail中放置了一個「console.log（'something'）」並保存在我的IDE中，它導致它重新呈現出於某種原因，我看到GUI我希望看到

編輯：我把一個console.log的狀態和this.logicLayers和this.logicLayersById和所有的狀態最終加載，但'this.logicLayers'和'this.logicLayersById'變量加載速度慢，我的控制檯一開始顯示它們未定義..但如果我控制檯登錄它2秒後它正確加載。但就好像渲染放棄了幾次嘗試後渲染並且沒有足夠長的時間？

renderWhenDataIsAvail() { 
    if (this.state.pagesById && this.state.graphicLayersById && this.logicLayers && this.logicLayersById && this.state.pages && this.subComps) { 
     return (
     <div> 
      {this.state.graphicLayers.map((id) => 
      <GraphicLayer 
       key={id} 
       addLayerClick={this.addLayerClick} 
       addPageClick={this.addPageClick} 
       graphicLayer={this.state.graphicLayersById[id]} 
       logicLayers={this.logicLayers} 
       logicLayersById={this.logicLayersById} 
       pages={this.state.pages} 
       pagesById={this.state.pagesById} 
       subComps={this.subComps} /> 
     )} 
     </div> 
    ); 
    } 
    } 


render() { 
    console.log(this.state); // these load eventually 
    console.log(this.logicLayers); // loads eventually but too slow? 
    console.log(this.logicLayersById); // loads eventually but too slow? 

    return (  
     <div> 
     {this.renderWhenDataIsAvail()} 
     </div> 
    ); 
    } 

Answer 1

的問題是，渲染不會等待this.logicLayersById和this.logicLayers在檢查的時間來加載，它只有在你改變重新呈現時出現的狀態和值檢查了一遍，你的頁面會得到更新因爲這些值存在

嘗試將值保存在狀態中。

renderWhenDataIsAvail() { 
    if (this.state.pagesById && this.state.graphicLayersById && this.state.logicLayers && this.state.logicLayersById && this.state.pages && this.subComps) { 
     return (
     <div> 
      {this.state.graphicLayers.map((id) => 
      <GraphicLayer 
       key={id} 
       addLayerClick={this.addLayerClick} 
       addPageClick={this.addPageClick} 
       graphicLayer={this.state.graphicLayersById[id]} 
       logicLayers={this.logicLayers} 
       logicLayersById={this.logicLayersById} 
       pages={this.state.pages} 
       pagesById={this.state.pagesById} 
       subComps={this.subComps} /> 
     )} 
     </div> 
    ); 
    } 
    } 


render() { 
    console.log(this.state); // these load eventually 
    console.log(this.logicLayers); // loads eventually but too slow? 
    console.log(this.logicLayersById); // loads eventually but too slow? 

    return (  
     <div> 
     {this.renderWhenDataIsAvail()} 
     </div> 
    ); 
    }