期待行为：当我们进行改变页码以及每页的条数时将参数放入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,
}}
至此问题就已经完美的解决了。再会！
