React MUI X Data Grid服务端取消排序返回空数组问题求助

数据老陈

2026-7-22

MUI X DataGrid 后端排序取消时崩溃问题解决

在使用MUI X DataGrid做后端排序（数据量过大无法前端全量加载）时，取消排序选项会触发sortModel变为空数组，直接访问model[0]会导致页面崩溃，同时错误的状态更新会导致无法真正取消排序，以下是正确的处理方式：

问题根源

取消排序时DataGrid会传入空数组作为sortModel，这是组件的设计行为。原代码中直接访问model[0].field和model[0].sort会因数组越界抛出错误；而手动构造带sort: null的对象会导致组件UI状态与本地状态不一致，无法正确触发取消排序的后端逻辑。

解决方案

修改handleSortModelChange，正确处理空数组场景，同时保持本地状态与组件传入的sortModel完全同步：

const [sortModel, setSortModel] = useState<GridSortModel>([
  {
    field: "review_date",
    sort: "desc",
  },
]);

const handleSortModelChange = (model: GridSortModel) => {
  if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
    setSortModel(model);
    // 根据sortModel是否为空，传递对应参数给后端
    const targetField = model.length > 0 ? model[0].field : undefined;
    const targetSort = model.length > 0 ? model[0].sort : undefined;
    reloadData(0, targetField, targetSort, searchValue);
  }
};

关键说明

状态同步：直接将组件传入的model设置为本地状态，确保DataGrid的UI排序状态与本地状态一致，避免交互异常。
参数处理：当model为空时，给reloadData传递undefined（或后端约定的空值标识），后端收到后返回未排序的原始数据（或按后端默认逻辑排序，比如主键升序）。
后端适配：如果后端需要明确的取消排序标识（比如sort: 'none'），可调整targetSort的取值逻辑：
```
const targetSort = model.length > 0 ? model[0].sort : 'none';
```