React 依赖material-ui 刷新的三种方式, window.location.reload, 路由刷新, 列表刷新
window.location.reload()
即是整个前端项目的刷新, 跟点击浏览器的刷新按钮一样, 即浏览器的刷新
navigate(0)路由的刷新
即跟你点击了路由一样, 当前页面整个刷新
使用tableRef 刷新列表数据
即当table的任何组件变化时, table 都会重新请求数据, 自动刷新
const tableRef = useRef();
<Table
title="Tags List"
tableRef={tableRef}
options={{
search: true,
paging: true,
columnsButton: true,
toolbar: true,
actionsColumnIndex: -1
}}
columns={defaultColumns }
data={_query => new Promise(async (resolve, _reject) => {
const page = _query?.page ?? 0;
const pageSize = _query?.pageSize ?? 5;
let baseUrl = await discoveryApi.getBaseUrl('tags');
baseUrl += '/getTagList';
const nameOrDescription: string = _query?.search ?? ''
fetch(baseUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
nameOrDescription: nameOrDescription,
offset: page * pageSize,
limit: pageSize
})})
.then(response => response.json())
.then(result => {
resolve({
data: result.items,
page: page,
totalCount: result.totalCount,
})
});
})}
actions={defaultActions}
/>
// 当修改数据, 点击保存时: // 调用查询列表的方法, 更新列表
const saveAndClose = async() => {
const baseUrl = await discoveryApi.getBaseUrl("tags");
await fetch(baseUrl + '/edit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: formData.id,
name: formData.name,
description: formData.description
}),
}).then(res => {
// 返回后端数据
if (res.status === 200) {
setOpen(false);
// 调用查询列表的方法, 更新列表
(tableRef?.current as any)?.onQueryChange();
alertApi.post({ message: 'Modification successful', severity: 'success', display: 'transient'});
}
return res.json();
}).then(data => {
if (data.error?.message) {
alertApi.post({ message: 'Modification failed, ' + data.error.message, severity: 'error' });
}
})
};
总结: 推荐使用第三种方法, 用户体验最好