Question

我的if语句中的所有内容都是我从API中获取的数据...如果我不将这个if语句用于检查是否存在可用...我收到错误说道具是未定义的..如果我把if语句首先检查数据是否正确..那么它不会渲染。

我知道数据是正确的，因为如果我放了一个＆＃34; console.log（＆＃39; something＆＃39;）＆＃34;在renderWhenDataisAvail中并保存在我的IDE中，由于某种原因导致它重新渲染，我看到了我希望看到的GUI

编辑：我把状态的console.log和this.logicLayers和this.logicLayersById以及状态中的所有内容最终加载但是＆＃39; this.logicLayers＆＃39;和＆＃39; this.logicLayersById＆＃39;变量加载速度慢，我的控制台首先将它们显示为未定义..但如果我控制台在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>
    );
  }

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

1 个答案: