Ant Design Pro ProTable 首次加载数据时请求参数带上外部跳转携带的参数
Ant Design React About 1,289 wordsmanualRequest
需要将ProTable的manualRequest设置为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扫描下方二维码关注公众号和小程序↓↓↓
Loading...