当所有数据可用时，如何呈现 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

问题在于，render 不会在检查时等待 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>
    );
  }

当所有数据可用时，如何呈现 GUI？

How can I render the GUI when all the data is available?

jsx

reactjs

react-jsx

redux

react-redux