http://t.csdnimg.cn/RMR3x，您好，关于这篇文章，我使用的Protable，且未使用dataSource而是直接使用了request，但仍然出现分页问题，请问我这种情况该如何解决，也没法清空dataSource
以下是我的部分代码，希望作者看到能回复一下，感谢
```javascript
import { getwxacodeunlimit } from '@/pages/promotion/voucherTpl/service';
import { GOODS_MODE, GOODS_STATUS } from '@/utils/enum';
import { DownOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import {
ActionType,
PageContainer,
ProColumns,
ProFormInstance,
ProTable,
} from '@ant-design/pro-components';
import { FormattedMessage, history, Link } from '@umijs/max';
import { App, Button, Divider, Dropdown, Image, InputNumber, Tabs } from 'antd';
import { MessageInstance } from 'antd/es/message/interface';
import { ModalStaticFunctions } from 'antd/es/modal/confirm';
import _, { pick } from 'lodash';
import React, { useRef, useState } from 'react';
import { GoodsAddItem } from '../goodsAdd/data';
import AuditGoodsForm from './components/AuditGoodsForm';
import UpdateStorageForm from './components/UpdateStorageForm';
import { GoodsItem, GoodsListParam } from './data';
import { getGoodsList, soldOutManyGoods, updateGoods, updateGoodsStatus } from './service';
let message: MessageInstance;
let Modal: Omit<ModalStaticFunctions, 'warn'>;
const goodsTypeMap: { label: string; key: string }[] = [
{ label: '商品', key: '-1' },
{ label: '积分', key: '3' },
{ label: '报名', key: '8' },
];
const GoodsTable: React.FC = () => {
const tableRef = useRef<ActionType>();
const formRef = useRef<ProFormInstance>();
const staticFunction = App.useApp();
message = staticFunction.message;
Modal = staticFunction.modal;
const [selectedRows, setSelectedRows] = useState<GoodsItem[]>([]);
const [searchParam, setSearchParam] = useState<GoodsListParam>({} as GoodsListParam);
const [goodsMode, setGoodsMode] = useState<string>(localStorage.getItem('goodsMode') ?? '-1');
const fetchData = async (
params: Record<string, any>,
sorter: Record<string, any>,
filter: Record<string, any>,
) => {
// 处理商品类型
if (goodsMode === '-1') {
// 如果goodsMode为'-1'，则保留params.goods_mode的值，如果它存在且非空；
// 否则，删除该属性
params.goods_mode =
params.goods_mode && params.goods_mode !== '' ? params.goods_mode : undefined;
} else {
// 如果goodsMode不是'-1'，则直接设置params.goods_mode为goodsMode的值
params.goods_mode = goodsMode;
}
// 处理排序
if (sorter.hasOwnProperty('storage_all')) {
params.group = 0;
params.orderBy = 'storage';
if (sorter.storage_all) {
params.order = sorter.storage_all === 'ascend' ? 'ASC' : 'DESC';
} else {
delete params.order;
delete params.orderBy;
if (!formRef.current?.getFieldValue('goods_name')) {
delete params.group;
}
}
}
setSearchParam(params);
try {
const response = await getGoodsList(params);
return response;
} catch (error) {
return {
data: [],
success: false,
total: 0,
};
} finally {
}
};
const columns: ProColumns<GoodsItem>[] = [
{
title: 'ID',
dataIndex: 'goods_id',
search: false,
width: 100,
},
{
title: '主图',
dataIndex: 'oss_url',
search: false,
render: (_, record: GoodsItem) => {
return (
<Image
width={70}
src={`${record.oss_url}?x-oss-process=image/resize,m_fill,w_100,h_100,quality,q_80`}
preview={{
src: record.oss_url + '?x-oss-process=image/format,webp',
}}
/>
);
},
width: 100,
},
{
title: '商品名称',
dataIndex: 'goods_name',
render: (_, record: GoodsItem) => {
return <span style={{ wordBreak: 'break-all' }}>{record.goods_name}</span>;
},
width: 260,
},
{
title: '商品类型',
dataIndex: 'goods_mode',
valueEnum: pick(GOODS_MODE, [1, 2]),
width: 100,
search: goodsMode === '-1',
},
{
title: 'sku',
dataIndex: 'sku',
render: (_, record: GoodsItem) => {
return record.sku || '无';
},
search: false,
width: 100,
},
{
title: '店铺名称',
dataIndex: 'store_name',
search: false,
width: 130,
},
{
title: '排序',
dataIndex: 'good_sort',
search: false,
width: 80,
render: (_: any, record: GoodsItem) => (
<InputNumber
style={{ width: '50px' }}
value={record?.good_sort}
onChange={(e) => handleUpdateSort(record, e ?? 0)}
/>
),
},
{
title: '商品价格(元)',
dataIndex: 'price',
search: false,
width: 130,
render: (_, record: GoodsItem) => (
<>
<div
style={{ display: record.goods_mode === 3 || record.goods_mode === 8 ? '' : 'none' }}
>
<div>
{record.goods_mode === 3 ? '兑换积分：' : '活动积分：'}
{record.points}
</div>
<div
style={{
display: record.goods_mode === 3 && record.points_price !== '0.00' ? '' : 'none',
}}
>
兑换金：{record.points_price}
</div>
<div
style={{
display: record.goods_mode === 8 && record.price !== '0.00' ? '' : 'none',
}}
>
活动金额：{record.price}
</div>
</div>
<div
style={{ display: record.goods_mode === 3 || record.goods_mode === 8 ? 'none' : '' }}
>
{record.price}
</div>
</>
),
align: 'right',
},
{
title: '总库存',
dataIndex: 'storage_all',
search: false,
render: (_, record) => {
return searchParam?.group === 0
? record.storage
: record.storage_all
? record.storage_all
: record.storage;
},
sorter: true,
align: 'center',
width: 100,
},
{
title: '状态',
dataIndex: 'goods_status',
search: true,
valueEnum: GOODS_STATUS,
width: 100,
}
];
return (
<PageContainer>
<Tabs
items={goodsTypeMap}
activeKey={goodsMode}
onChange={(e) => {
localStorage.setItem('goodsMode', e);
setGoodsMode(e);
tableRef.current && tableRef.current.reload();
}}
/>
<ProTable<GoodsItem, GoodsListParam>
columns={columns}
request={(params, sorter, filter) => fetchData(params, sorter, filter)}
rowKey={(record) => record.goods_id}
actionRef={tableRef}
formRef={formRef}
pagination={{ showSizeChanger: true, size: 'default' }}
rowSelection={rowSelection}
/>
</PageContainer>
);
};
export default GoodsTable;
```
