将分页参数page, pageSize放入URL中，然后读取UR

期待行为：当我们进行改变页码以及每页的条数时将参数放入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中，正确的写法应该是这样

1. 在ProTable中

form={{
  initialValues: {
    current: query?.page,
    pageSize: query.pageSize,
  },
}}

2. 使用useEffect同步

  useEffect(() => {
    formRef?.current?.setFieldsValue({
      current: query?.page,
      pageSize: query.pageSize,
    });
  },[
    query?.page,
    query.pageSize,
  ]);

3. 去掉pagination中的pageSize和current

当我们切换了每页显示的条数为30时，点击重置发现pageSize会变成20，并不是我们初始设置的默认值，这是因为ProTable默认是20，此时应该这样处理

pagination={{
  defaultCurrent: 1,
  defaultPageSize: 10,
}}

至此问题就已经完美的解决了。再会！