React 依赖material-ui 刷新的三种方式, window.location.reload, 路由刷新, 列表刷新

文章介绍了在React应用中刷新页面的三种方法:使用window.location.reload()实现全页面刷新,通过navigate(0)进行路由刷新,以及利用tableRef更新列表数据。推荐在需要时使用tableRef刷新列表,以提供更好的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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' });
       }
     })
  };

总结: 推荐使用第三种方法, 用户体验最好

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值