我在做一个项目,一开始用**MUI X DataGrid,后来因为业务逻辑的原因改用DataGridPro**,最近改了方案(从Pro升级到Premium),改方案后有些副作用,遇到了&遇到了一些现有代码的奇怪问题,我用的是"@mui/x-data-grid-premium": "^6.0.2"
以下API(onPageChange
、onPageSizeChange
、rowsPerPageOptions
)在之前的计划中可以工作,但在当前计划中不可用:
...
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?
1条答案
按热度按时间6ovsh4lw1#
由于版本不匹配,API无法工作/已损坏。以前的API适用于旧版本(
v5
).在我的情况下,作为计划升级&安装最新版本(v6.0.2
),因此应使用较新的API(根据文档,* 尽管文档说明了较新的API适用于v6.0.3
版本 *)。无论如何,以下是需要进行的更改💯