请问一下 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)