0

模型：

import { getNewslList } from '../services/home';
export default {
  namespace: 'newslist',
  state:{
    list: [],
    total: null,
    pageSize: null,
    currentPage: null,
    id: null
  },
  reducers: {
    query(state, { payload: { list, total, pageSize, currentPage, id } }) {
      return { ...state, list, total, pageSize, currentPage, id };
    },
  },
  effects: {
    *fetch({ payload: { id , p = 1 }  }, {call, put}) {
      // const cid = id;
      const { data } = yield call(getNewslList, id, p );
      yield put({
        type: 'query',
        payload:{
          list: data.Result.Data,
          total: parseInt(data.Result.TotalCount, 10),
          pageSize: parseInt(data.Result.PageSize, 10),
          currentPage: parseInt(data.Result.PageIndex, 10),
          id: id,
        }
      });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === '/news') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },
}

路线：

import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm } from 'antd';
import { routerRedux } from 'dva/router';

function NewsList({ dispatch, list: dataSource, loading, total, pageSize, currentPage, id }) {
  function deleteHandler(id) {
    dispatch({
      type: 'users/remove',
      payload: id,
    });
  }
  function pageChangeHandler(p) {
    dispatch(routerRedux.push({
      pathname: '/news',
      query: { p },
    }));
  }
  function editHandler(id, values) {
    dispatch({
      type: 'users/patch',
      payload: { id, values },
    });
  }

  const columns = [
    {
      title: '日期',
      dataIndex: 'posted',
      key: 'date',
      render: text => <a href="">{text.slice(0,10)}</a>,
    },
    {
      title: '点击',
      dataIndex: 'views',
      key: 'click',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
  ];

  return (
    <div>
      <div>
        <Table
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowKey={record => record.id}
          pagination={false}
        />
        <Pagination
          className="ant-table-pagination"
          total={total}
          current={currentPage}
          pageSize={pageSize}
          onChange={pageChangeHandler}
        />
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  const { list, total, pageSize, currentPage, id } = state.newslist;
  return {
    loading: state.loading.models.newslist,
    list,
    total,
    pageSize,
    currentPage,
    id,
  };
}

export default connect(mapStateToProps)(NewsList);

现在，在URL为localhost:8000/news/?p=2后点击函数pageChangeHandler事件
我希望URL为localhost:8000/news/?id=1&p=2
这个参数是按如下方式添加的吗？

  function pageChangeHandler(p) {
    dispatch(routerRedux.push({
      pathname: '/news',
      query: { p },
    }));
  }

我怎么做？

4

1 回答 1

0

将您的 pageChangeHandler 更改为：

 function pageChangeHandler(id, p) {
    dispatch(routerRedux.push({
      pathname: '/news',
      query: { id, p },
    }));
 }

然后像这样使用它：

pageChangeHandler.bind(id)
于 2017-04-10T14:56:45.117 回答