材料UI数据网格:从状态中删除行会导致无法读取属性错误

Question

1. 我有一个材料UI数据网格，如下所示：

<DataGrid
className={classes.datagrid}
page={page}
pageSize={rowsPerPage}
rows={rows}
columns={columns}
sortModel={sortModel}
rowCount={meta.total}
loading={store.panels.loading}
rowsPerPageOptions={
[5, 10, 25, 50] as PageSizeOptions[]
}
disableSelectionOnClick
onPageSizeChange={changePageSize}
autoHeight
onPageChange={handlePageChange}
onSortModelChange={updateSort}
components={{
loadingOverlay: LoadingOverlay,
noRowsOverlay: NoRowOverlay,
}}
/>

2. 我有一个可观察的mobx数组。const rows=[从全局存储继承的mobx数组]
3. 然后，我从全局存储的数组中删除一行
4. 我收到以下错误：

TypeError: Cannot read property 'id' of undefined
(anonymous function)
node_modules/@material-ui/data-grid/dist/index-esm.js:15
etc...

mobx数组是一个对象数组〔｛id:1，name："bob"｝，etc.〕

列：

const columns: ColDef[] = [
{ field: 'id', hide: true },
{
headerName: 'Name',
field: 'name',
width: 110,
},
];

只有当我试图删除一行时才会出现此错误。添加、获取或更新操作正常。

这似乎是MUI DataGrid的一个错误https://material-ui.com/components/data-grid/rows/

让我知道。

谨致问候，埃米尔

Answer 1

修复程序在v4.0.0-alpha.10中发布。参考：https://github.com/mui-org/material-ui-x/issues/571

Answer 2

这确实是DataGrid的错误。您需要将库降级到版本：4.0.0-阿尔法.8或将其设置为"0"；https://pkg.csb.dev/mui-org/material-ui-x/commit/02423225/@材料ui/数据网格"；