当所有数据都可用时，如何渲染 GUI？

Question

我的 if 语句中的所有内容都是我从 API 中获取的数据。如果我不使用这个 if 语句来检查是否存在可用的数据。我收到一条错误消息，指出 props 未定义。 . 如果我把 if 语句用于首先检查数据是否正确.. 然后它不会呈现。

我知道数据是正确的，因为如果我在 renderWhenDataisAvail 中放入“console.log('something')”并保存在我的 IDE 中，它会由于某种原因导致它重新渲染，我会看到我的 GUI我希望看到

编辑：我放置了状态和 this.logicLayers 和 this.logicLayersById 的 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在检查时加载，只有当您更改重新渲染发生的状态并再次检查值并且您的页面才会更新因为值在那里

尝试保存状态中的值。

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