如题,在学习 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 值,自动刷新页面。