如何跳过MUI X Data Grid初始状态变更，仅保存用户修改的状态？

要跳过初始状态的onStateChange事件，只保存用户主动修改后的状态，可以通过标记网格初始化完成状态的方式实现，核心是利用DataGrid的onGridReady事件判断初始状态是否加载完成。

实现步骤 #

1. 添加状态变量跟踪网格是否完成初始化
2. 绑定onGridReady事件，在网格初始化完成后切换标记
3. 在onStateChange回调中，仅当标记为true时才执行保存操作

修改后的完整代码 #

组件部分

import { useState, useCallback } from 'react';
import { DataGridPremium, GridEventListener } from '@mui/x-data-grid-premium';

// ... 其他变量定义（apiRef、initialState、saveState、STATE_KEY等）

export default function YourGridComponent() {
  const [gridInitialized, setGridInitialized] = useState(false);

  const handleGridReady: GridEventListener<'gridReady'> = useCallback(() => {
    // 网格完成初始渲染和状态设置后，标记为已初始化
    setGridInitialized(true);
  }, []);

  const handleStateChangeEvent: GridEventListener<'stateChange'> = useCallback(() => {
    // 仅当网格已初始化后，才保存状态
    if (!gridInitialized) return;

    saveState(
      {
        ...apiRef.current.exportState(),
        preferencePanel: { open: false },
      },
      STATE_KEY
    );
  }, [STATE_KEY, apiRef, gridInitialized]);

  return (
    <DataGridPremium
      initialState={{
        ...initialState,
        sorting: {
          sortModel: [{ field: columns[0].field, sort: 'asc' }],
          ...initialState?.sorting,
        },
      }}
      onStateChange={handleStateChangeEvent}
      onGridReady={handleGridReady}
      {...otherProps}
    />
  );
}

方案说明 #

• onGridReady会在DataGrid完成初始渲染、初始状态设置完毕后触发，此时网格的初始状态已经稳定，不会再触发无意义的初始状态保存。
• 初始的onStateChange触发时，gridInitialized仍为false，会直接跳过保存逻辑；只有用户后续修改列顺序/尺寸、搜索、排序等状态时，才会执行保存操作。

关于绑定特定事件的补充 #

你之前尝试绑定onColumnOrderChange等特定事件的方式，确实容易遗漏场景（比如搜索状态变更、多列排序变更等）。而onStateChange结合初始化标记的方式，既能覆盖所有需要持久化的状态变更场景，又能避免保存初始状态。

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