Question

我正在等待来自名为GetDealersStore的商店的道具，而我获取数据的方式是我正在执行的操作：

  componentWillMount () { GetDealersActions.getDealers(); }

我已经测试了应用，componentWillMount()正在初始渲染之前运行，我有这个

let dealerInfo;
if (this.state.dealerData) {
  dealerInfo = this.state.dealerData.dealersData.map((dealer) => {
    return (<div>CONTENT</div>);
  })
} else {
  dealerInfo = <p>Loading . . .</p>
}

但是第一秒你可以在屏幕上看到<p>Loading . . .</p>，这是上面条件中的else，然后渲染的其余部分会出现return (<div>CONTENT</div>);，这是有条件的if。所以，我想，这意味着render方法已经被触发两次，因为它一直在等待来自数据库的数据。

数据库中的数据在第一次渲染时不可用，因此，如何在第一次初始渲染发生之前获取该数据？

Answer 1

您无法使用单个组件执行此操作。您应该按照Container Component模式将数据与渲染分开。

let DealersContainer = React.createClass({
  getInitialState() {
    return {dealersData: []};
  },
  componentWillMount() {
    GetDealersActions.getDealers();
  },
  render() {
    let {dealersData} = this.state;
    return (<div>
      {dealersData.map((dealer) => {
        let props = dealer;
        return (<Dealer ...props />); // pass in dealerData as PROPS here
      })}
    </div>);
  }
});

然后更新您的Dealer组件以接收道具并呈现实际内容。

Answer 2

我的答案与Mathletics＆＃39;类似，只是更详细。

在这个例子中，我包括将dealerData的状态初始化为null;这是用于确定容器是否已从商店返回数据的检查。

它冗长，但声明性，并按照您想要的顺序执行您想要的操作，并且每次都能正常工作。

MarbleSackOwner owner1 = null;
...
while(..){
...
owner1 = new MarbleSackOwner(nameFromFile, colorFromFile,
                                    capacityFromFile, currentCountFromFile);
...
}

如何在加载数据之前阻止组件呈现？

2 个答案: