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

2020 年 6 月 23 日
 vainly

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

1492 次点击
所在节点    问与答
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/684149

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX