跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 请问一下 Antd Pro 中的 Protable 的 request 如何使用 model 的 state 数据呢?
未分類
25 6 月 2020

请问一下 Antd Pro 中的 Protable 的 request 如何使用 model 的 state 数据呢?

请问一下 Antd Pro 中的 Protable 的 request 如何使用 model 的 state 数据呢?

資深大佬 : vainly 3

如题,在学习 antd pro,仿照着 demo 写了个小例子,发现 antd pro 中的 protable 没法直接使用 state 。

index.tsx  import React, {Component} from 'react'; import {connect} from 'dva'; import ProTable  from '@ant-design/pro-table';  import {PageHeaderWrapper} from "@ant-design/pro-layout"; import {TableListItem} from "@/pages/CountryList/data"; import {ConnectProps} from "@@/plugin-dva/connect"; import {StateType} from './model';  export interface CountryProps extends Partial<ConnectProps> {   countries: StateType }   class CountryList extends Component<CountryProps> {   componentDidMount() {     this.query({});   }    query(params:any) {     const { dispatch } = this.props;     if (dispatch) {       dispatch({         type: 'countries/pageQuery',         payload: {           ...params         }       });     }   }    render(){     const {countries:{data}} = this.props;     const columns =       [         {           title: '国家名称',           dataIndex: 'countryName',         },         {           title: '国家代码',           dataIndex: 'countryCode',         },         {           title: '新增时间',           dataIndex: 'createTime',         },       ];     return (       <PageHeaderWrapper>         <ProTable<TableListItem>           headerTitle="国家列表"           rowKey="id"           toolBarRender={(action, {selectedRows}) => []}           columns={columns}           dataSource={data}           // request={params => fetch(params)}           rowSelection={{}}         />       </PageHeaderWrapper>     );   } }  // @ts-ignore export default connect(({ countries }: StateType) => ({   countries, }))(CountryList);  
dva model: model.ts import {page} from './service'; import {Effect, Reducer} from "umi"; import {TableListItem} from './data.d'  export interface StateType {   data: TableListItem[];   success: boolean;   total: number;   pageSize: number;   current: number; }  export interface CountryModelType {   namespace: string,   state: StateType,   effects: {     pageQuery: Effect     query: Effect   },   reducers: {     list: Reducer<StateType>   } }  const Model: CountryModelType = {   namespace: 'countries',   state: {     data: [],     success: false,     total: 0,     pageSize: 0,     current: 0   },   effects: {     *pageQuery({payload}, {call, put}){       const resp = yield call(page, payload);       console.log(`resp:::${JSON.stringify(resp)}`)       yield put({         type: 'list',         payload:  {           data: resp.result.list,           total: resp.result.total,           success: true,           pageSize: resp.result.pageSize,           current: resp.result.pageNum,         }       })     },     *query({payload}, {call, put}) {       const resp = yield call(page, payload);       return  {         data: resp.result.list,         total: resp.result.total,         success: true,         pageSize: resp.result.pageSize,         current: resp.result.pageNum,       };     }   },   reducers: {     list(state, {payload}){       return {         ...state,         ...payload       }     }   } }  export default Model;  

我想着 pretable 的 request 属性能不能直接调用 dispatch 更改 state 值,自动刷新页面。

大佬有話說 (0)

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具