如何解决ant-design页面异步加载的问题

本文介绍了解决ant-design页面异步加载问题的方法。通过从mock数据中获取信息,可以有效解决这一难题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

其实解决这个问题,不是特别难,就是有些时候,人们会想不到这么做

首先,在上一期的从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>
    )
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值