需要实现这样一种需求
react前端使用proTable展示数据,要求点击删除某条数据后,将要删除的数据通过接口发送到后台,后台成功删除数据
前端不调用接口直接展示删除一条数据后的table,保证页面不出现reload效果
问题
按照我现在的代码写,还是会通过后端接口获取数据,页面有一次reload的效果,有什么办法解决吗?
我的部分代码如下:
const TableList: React.FC = () => {
const [dataList, setDataList] = useState<any[]>([]);
const [dataListTotal, setDataListTotal] = useState<number>(0);
const [selfParams, setSelfParams] = useState<any>({ deleteUpdate: null, analysisUpdate: null });
// 点击删除的回调
const handleDelete = async (data: STUDY.ListItem, index: any) => {
const resultData = await deleteStudy(BigInt(data!.id));
if (resultData?.message === 'OK.') {
setSelfParams({
deleteUpdate: `deleteIndex-${index}`,
});
}
};
// proTable
const columns: ProColumns<STUDY.ListItem>[] = [
/* 其他表格项
*...
*/
{ title: "删除",
dataIndex: 'Action',
search: false,
render: (_list, row, index) => {
<Popconfirm title="确认删除?" onConfirm={() => handleDelete(row, index)}>
<span className="deleteOpt">删除</span>
</Popconfirm>
)}
},
},
];
const initList = async (paramsData: STUDY.PageParams) => {
const isNotNull = keys(paramsData).filter((key: string) => paramsData[key]);
const params = pick(paramsData, isNotNull);
// 删除
if (params.deleteUpdate) {
const getIndex = params.deleteUpdate.split('-')[1];
// 如果不将deleteUpdate设置为undefined,点击换页前台依然会继续删除数据,刷新后才恢复正常
setSelfParams({
deleteUpdate: undefined,
});
const storeData = [...dataList];
storeData.splice(Number(getIndex), 1);
setDataList(storeData);
message.info(formatMessage({ id: 'pages.form.deleteSuccess' }));
return {
data: storeData,
total: dataListTotal - 1,
success: true,
};
}
// 调用接口获取表单数据
const getDataResult = await getStudyList(params);
if (getDataResult) {
const {
data: { resultList, total },
} = getDataResult;
setDataList(resultList);
setDataListTotal(total);
return {
data: resultList,
total: total,
success: true,
};
} else {
setDataList([]);
setDataListTotal(0);
return {
data: [],
total: 0,
success: false,
};
}
};
return (
<div>
<PageContainer>
<ProTable>
pagination={{
showSizeChanger: true,
}}
beforeSearchSubmit={(params: any) => {
setSelfParams({ deleteUpdate: null, analysisUpdate: null });
return {
...params,
deleteUpdate: null,
analysisUpdate: null,
};
}}
params={selfParams}
actionRef={ref}
columns={columns}
search={{
labelWidth: 'auto',
}}
request={initList}
rowKey="id"
/>
</PageContainer>
</div>
);