Question

我有一个用材料 ui 数据网格制作的表格。当我转到下一页（2 或 3）并应用过滤器后，该页面停留在（2 或 3）并且过滤器的结果似乎是空的，因为该页面位于没有过滤器的列表中的当前页面。我想在过滤器更改时将页面设置为第 1 页，但我遇到了问题。

我尝试使用 useGridApiRef() 钩子设置页面，但无论组件中发生什么，gridRef.current 始终为 null。

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, frFR, GridColDef, useGridApiRef } from '@material-ui/data-grid';
import { FC, useEffect, useRef } from 'react';
// Some other codes

const ListComponent: FC<ListComponentProps> = ({
  columns,
  rows,
  paths,
  clickSearchData,
  loading,
  onRowSelected,
  createNewData,
  withCreate,
  FilerComponent,
  floatingButtons,
  perPage,
}) => {
  const classes = useStyles();
  const theme = createMuiTheme({}, frFR);
  const gridRef = useGridApiRef();

  useEffect(() => {
    console.log('this is the ref', gridRef.current) // always null
    if(rows.length && gridRef.current) {
      console.log('got here') // never get here
      gridRef.current.setPage(0)
    }
  }, [rows.length, gridRef])

  return (
    <div>
      <div className={classes.content}>
        <div className={classes.item}>
          <div>
            <div className={classes.dataGrid}>
                <DataGrid
                  rows={rows}
                  columns={columns}
                  loading={loading}
                  pageSize={perPage || 20}
                  sortingOrder={['desc', 'asc']}
                  disableColumnMenu={true}
                  onRowClick={k => onRowSelected(k.row)}
                  hideFooterSelectedRowCount={true}
                  className={classes.tableRow}
                  apiRef={gridRef as any} // apiRef does not accept the gridRef without the as any
                />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ListComponent;

Answer 1

问题是数据网格不支持 apiRef。我需要升级到 @material-ui/x-grid 才能使用 apiRef 并以编程方式操作表。

无法在材质 ui 数据网格中设置页面

1 个答案: