Comment ajouter des paramètres à cet événement sur la pagination chez antd?

Question

modèle:

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 }); 
     } 
     }); 
    }, 
    }, 
} 

routes:

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); 

maintenant, cliquez sur la fonction événement pageChangeHandler après l'URL est localhost: 8000/nouvelles/p = 2
Je veux l'URL à localhost?: 8000/news /? Id = 1 & p = 2
Ce paramètre est-il ajouté de la façon suivante?

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

Comment puis-je le faire?

Answer 1

Changer votre pageChangeHandler à:

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

utiliser ensuite comme ceci:

pageChangeHandler.bind(id)