IT技术 - 如何在加载数据之前阻止组件呈现？ - 吾爱随笔录

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

IT技术 javascript reactjs

2021-05-08 23:08:53

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

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

2个回答

您无法使用单个组件执行此操作。您应该遵循容器组件模式将数据与渲染分开。

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

我的回答与 Mathletics 类似，只是更详细一些。

在这个例子中，我包括了将 DealerData 的初始化状态设置为 null；这是用于确定数据是否已由容器从存储返回的检查。

它很冗长，但具有声明性，并且按照您想要的顺序执行您想要的操作，并且每次都可以使用。

const DealerStore = MyDataPersistenceLibrary.createStore({
  getInitialState() {
    return {
      dealerData: null
    };
  },

  getDealers() {
    // some action that sets the dealerData to an array
  }
});

const DealerInfoContainer = React.createClass({
  componentWillMount() {
    DealerStoreActions.getDealers();
  },

  _renderDealerInfo() {
    return (
      <DealerInfo {...this.state} />
    );
  },

  _renderLoader() {
    return (
      <p>Loading...</p>
    );
  },

  render() {
    const { dealerData } = this.state;

    return (
      dealerData
      ? this._renderDealerInfo()
      : this._renderLoader()
    );
  }
});

const DealerInfo = React.createClass({
  getDefaultProps() {
    return {
      dealerData: []
    };
  },

  _renderDealers() {
    const { dealerData } = this.props;

    return dealerData.map(({ name }, index) => <div key={index}>{name}</div>);
  },

  _renderNoneFound() {
    return (
      <p>No results to show!</p>
    );
  },

  render() {
    const { dealerData } = this.props;

    return (
      dealerData.length 
      ? this._renderDealers()
      : this._renderNoneFound()
    );
  }
});

其它你可能感兴趣的问题

上一篇自动调平时打印机超出床位下一篇React 门户可以在无状态功能组件 (SFC) 中使用吗？