next.js 从DataGridPro升级到DataGridPremium后,API不工作

2exbekwf  于 2023-04-11  发布在  其他
关注(0)|答案(1)|浏览(162)

我在做一个项目,一开始用**MUI X DataGrid,后来因为业务逻辑的原因改用DataGridPro**,最近改了方案(从Pro升级到Premium),改方案后有些副作用,遇到了&遇到了一些现有代码的奇怪问题,我用的是"@mui/x-data-grid-premium": "^6.0.2"
以下API(onPageChangeonPageSizeChangerowsPerPageOptions)在之前的计划中可以工作,但在当前计划中不可用:

...
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(10);

const onPageChange = (changedPage) => {
    setPage(changedPage);
    handlePagination({ max: pageSize, offset: changedPage * pageSize });
};

const onPageSizeChange = (changedSize) => {
    setPageSize(changedSize);
    handlePagination({ max: changedSize, offset: page * changedSize });
};
...

<DataGridPremium
    ...
    experimentalFeatures={{ newEditingApi: true }}
    onPageChange={onPageChange}
    onPageSizeChange={onPageSizeChange}
    page={page}
    pageSize={pageSize}
    pagination
    paginationMode="server"
    rowsPerPageOptions={[10, 20, 30, 50, 100]}
/>

从上面的代码中可以看出,这是一个服务器端分页,带有受控状态pageSize & page).正如我提到的,它是工作的代码之前,但现在不工作(关联的func未触发)。此外,每页行数下拉列表显示[25,50,100]而不是[10,20,30,50,100]。100]。你可以看看DataGridPremium API.api,它是按照文档使用的,但不起作用。

注意:前几天我遇到过类似的类型API相关问题,例如行选择无法按预期工作,但后来按照以下代码修复了它:

// from this
onSelectionModelChange={(newSelectionModel) => handleSelections(newSelectionModel)}

// to this
onRowSelectionModelChange={(newSelectionModel) => handleSelections(newSelectionModel)}

现在回到我目前的API问题,我该如何修复它?有什么我遗漏或需要做的吗?或者是来自MUI X DataGridPremium端的bug?

6ovsh4lw

6ovsh4lw1#

由于版本不匹配,API无法工作/已损坏。以前的API适用于旧版本(v5).在我的情况下,作为计划升级&安装最新版本(v6.0.2),因此应使用较新的API(根据文档,* 尽管文档说明了较新的API适用于v6.0.3版本 *)。无论如何,以下是需要进行的更改💯

...
const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 10,
  });

useEffect(() => {
    const { page, pageSize } = paginationModel;
    handlePagination({ max: pageSize, offset: page * pageSize });
  }, [paginationModel]);
...

<DataGridPremium
    ...
    pageSizeOptions={[10, 20, 30, 50, 100]}
    paginationModel={paginationModel}
    onPaginationModelChange={setPaginationModel}
/>

相关问题