javascript - 如何防止组件在加载数据之前呈现？

Question

我正在等待 Prop 从名为 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在有条件的。所以，我猜，这意味着渲染方法被触发了两次，因为它一直在等待来自数据库的数据。

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

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 组件以接收 Prop 并呈现实际内容。