1. 程式人生 > >如何解決ant-design頁面非同步載入的問題

如何解決ant-design頁面非同步載入的問題

其實解決這個問題,不是特別難,就是有些時候,人們會想不到這麼做

首先,在上一期的從mock中拿到資料之後  這是我的另外一份資料

import React, { Component } from 'react';
import { connect } from 'dva';@connect(({ guestsManage,loading }) => ({
  guestsManage,
  guestDatas:guestsManage.data,
  loading: loading.effects['guestsManage/assetManageShow'],
  subming: loading.effects
['guestsManage/getOrderIncomeAndRefondShow'], })) export default class CheckIncome extends Component {
//頁面渲染完之後才載入資料
  componentDidMount() {
    const { dispatch } = this.props;
    console.log(this.props.guestDatas);
    dispatch({
      type: 'guestsManage/assetManageShow',
      payload:{
        user_id
:'1191561', }, }) } render() { return (
//頁面載入中
      <Spin spinning={this.props.loading===undefined ? false:this.props.loading}>
        <Layout className={styles.all}>
          <Content style={{ margin: '0px 5px 0', overflow: 'initial' }}>
            
              {/*表格主體內容*/
} <div>
                //頁面打樁
                {console.log(this.props.guestsManage.data===undefined?[]:this.props.guestsManage.data.message)}
                <Table
className={styles.mainTable}columns={columns}
                    //將打樁之後獲得的資料載入渲染到頁面上
dataSource={this.props.guestsManage.data===undefined?[]:this.props.guestsManage.data.message}                />
              </div>         
</Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2016 Created by Ant UED</Footer>
        </Layout>
      </Spin>
    )
  }
}