Ant Design Pro ProTable 首次加载数据时请求参数带上外部跳转携带的参数

Ant Design React About 1,289 words

manualRequest

需要将ProTablemanualRequest设置为true,表示都是手动请求。

如果不设置manualRequest,虽然有时候在DevTools中看到只有一次请求,是因为正好useEffect抢到了执行权,直接先submit了。

可以使用setTimeout,复现两次请求的情况。

代码

import {useSearchParams} from "umi";

const formRef = useRef<ProFormInstance>(null!);

const [searchParams] = useSearchParams();

useEffect(() => {
  const from = searchParams.get('from');
  const to = searchParams.get('to');
  if (from && to) {
    formRef?.current?.setFieldValue("date", [dayjs(from), dayjs(to)] as [dayjs.Dayjs, dayjs.Dayjs]);
  }
  console.log("submit", from, to)
  formRef?.current?.submit();
  // setTimeout(() => {
  //   formRef?.current?.submit();
  // }, 300)
}, [searchParams]);

  <ProTable<TableListItem>
    formRef={formRef}
    manualRequest={true}
    request={async (params, sort, filters) => {
      console.log(params)
      const [[key, value] = []] = Object.entries(sort)
      const res = await request<Res>('/api/test', {
        method: 'GET',
        params: {
          page: params.current,
          pageSize: params.pageSize,
          sortField: key,
          sortMode: value === 'ascend' ? 'asc' : 'desc',
          ...params
        },
      });
      return {
        data: res.data.list,
        success: res.code === 0,
        total: res.data.count,
      }
    }}
     />
Views: 13 · Posted: 2026-09-04

———         Thanks for Reading         ———

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓
Prev Post
Today In History
Browsing Refresh