当先锋百科网

首页 1 2 3 4 5 6 7

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

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