如何解決ant-design頁面非同步載入的問題
阿新 • • 發佈:2019-02-04
其實解決這個問題,不是特別難,就是有些時候,人們會想不到這麼做
首先,在上一期的從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> ) } }