모든 데이터를 사용할 수있는 경우 어떻게 GUI를 렌더링 할 수 있습니까?

Question

내 if 문의 모든 것이 데이터입니다. API에서 꽤 많이 잡아 먹고 있습니다. if if 문을 넣어서 사용 가능한지 확인하지 않으면 소품이 정의되지 않는다는 오류가 나타납니다. if 문에 데이터가 올바른지 먼저 확인하라. 그러면 렌더링되지 않는다.

"console.log ('something')"을 renderWhenDataisAvail에 저장하고 내 IDE에 저장하면 데이터가 올바르다는 것을 알 수 있습니다. 이유는 무엇인가에 따라 다시 렌더링되고 GUI가 표시됩니다. 나는보고 싶다

EDIT : 나는 상태의 this.logicLayers와 this.logicLayersById와 this.logicLayersById와 everytthing을 console.log에 넣는다.하지만 '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 기다리지 않습니다 렌더링이 그 당신은 다시 쓰게가 발생하는 상태를 변경하고 값을 다시 확인하고 페이지를 업데이트받을 경우에만 값이 있기 때문에

값을 state에 저장하십시오.

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> 
    ); 
    }