期待行為：當我們進行改變頁碼以及每頁的條數時將參數放入url，當刷新頁面之后保留刷新前的參數。
import React, { useEffect, useRef } from "react";
import { ActionType, ProFormInstance, ProTable } from "@ant-design/pro-components";
import { NumberParam, QueryParamConfig, StringParam, useQueryParams, withDefault } from "use-query-params";
export default function Index() {
const actionRef = useRef<ActionType>();
const formRef = useRef<ProFormInstance>();
const [query, setQuery] = useQueryParams({
page: withDefault(NumberParam, 1),
pageSize: withDefault(NumberParam, 10),
});
const handleQuery = (params) => {
setQuery({
page: params.current,
pageSize: params.pageSize,
});
};
const handleReset = () => {
actionRef.current?.reset?.();
};
return (
<ProTable
actionRef={actionRef}
formRef={formRef}
columns={columns}
rowKey="id"
request={handleQuery}
onReset={handleReset}
form={{
initialValues: {
current: query?.page,
pageSize: query.pageSize,
},
submitter: {
render:(props, doms) => [...doms.reverse()]
}
}}
pagination={{
defaultCurrent: 1,
defaultPageSize: 10,
total: data?.totalSize,
showSizeChanger: true,
onChange: (page, pageSize) => {
setQuery({
...query,
page,
pageSize,
})
},
}}
dataSource={[]}
/>
)
}
頁面大概如下
image.png
當我們刷新頁面并沒有把
url上面的page,pageSize同步到ProTable中原因是我們寫了
pagination={{
pageSize: query?.pageSize,
current: query?.page,
}}
這樣寫并沒有把url上面的page,pageSize寫入到ProTable中，正確的寫法應該是這樣
- 在
ProTable中
form={{
initialValues: {
current: query?.page,
pageSize: query.pageSize,
},
}}
- 使用
useEffect同步
useEffect(() => {
formRef?.current?.setFieldsValue({
current: query?.page,
pageSize: query.pageSize,
});
},[
query?.page,
query.pageSize,
]);
- 去掉
pagination中的pageSize和current
當我們切換了每頁顯示的條數為30時，點擊重置發現pageSize會變成20，并不是我們初始設置的默認值，這是因為ProTable默認是20，此時應該這樣處理
pagination={{
defaultCurrent: 1,
defaultPageSize: 10,
}}
至此問題就已經完美的解決了。再會！
