すべてのデータが利用可能になったらGUIをどのように表示できますか？

Question

私のif文のすべてがデータです。私はAPIからかなり掴んでいます。もしこのif文を使って、利用可能かどうかをチェックしないと、小道具が定義されていないというエラーが出ます。最初にデータが正しいことを確認するifステートメントを置くと、レンダリングされません。

renderWhenDataisAvailに「console.log（ 'something'）」を入れてIDEに保存すると、何らかの理由でレンダリングが再開され、GUIが表示されるため、データが正しいことが分かります私は見ることを望んでいる

EDIT：私は状態のthis.logicLayersとthis.logicLayersとthis.logicLayersByIdとeverytthingの最終的には '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> 
    ); 
    }