MUI X Data Grid getRowModels返回Map而非数组问题咨询

为什么getRowModels()返回对象？ #

MUI X Data Grid内部采用以行ID为键的对象结构存储行数据，这种设计能大幅提升按ID查询、更新行的效率，是组件针对大数据量场景做的性能优化，所以getRowModels()直接返回了这个内部存储结构，而非数组。

获取可遍历的行数组方法 #

你可以通过原生JS方法把对象转成数组：

1. 直接获取行数据数组 #

用Object.values()提取对象的所有值，得到纯行数据数组：

const handleSave = () => {
  const rowModels = apiRef.current.getRowModels();
  const rowsArray = Object.values(rowModels);
  console.log(rowsArray); // 现在可以用.map()遍历了
};

2. 获取包含行ID的行数组 #

如果需要把行ID也包含在每行数据里，用Object.entries()解构后重组：

const handleSave = () => {
  const rowModels = apiRef.current.getRowModels();
  const rowsWithId = Object.entries(rowModels).map(([rowId, rowData]) => ({
    ...rowData,
    id: rowId
  }));
  console.log(rowsWithId);
};

额外说明 #

如果你需要的是当前页面可见、经过筛选/排序后的行数据，可以改用getVisibleRowModels()，同样用上述方法转数组：

const visibleRows = Object.values(apiRef.current.getVisibleRowModels());

内容的提问来源于stack exchange，提问作者Pusoy