reactjs - 如何在初始状态加载后保存 MUI X 数据网格的状态更改？

我目前正在实现将网格状态持久化到 localStorage，这样任何之前在网格状态中进行过更改的用户在再次访问时都能恢复这些状态：

有针对性的变更以节省

• 列顺序/大小/可见性
• 搜索
• 排序

我正在尝试使用 DataGridPremium 的 onStateChange 事件，尽管当状态初始化时该事件也会触发。我不希望这样，因为我不想在用户没有对网格做任何更改时保存状态。

有没有办法让我跳过 initialState 的 change 事件？

可能有一个事件，我可以绑定到它，它会告诉我网格已经完成加载其 initialState，并保存一个组件状态“gridInitialized”。

这是我的网格的一部分：

<DataGridPremium
    initialState={{
        ...initialState,
        sorting: {
            // Sort first column by default.
            sortModel: [{ field: columns[0].field, sort: 'asc' }],
            ...initialState?.sorting,
        },
    }}
    onStateChange={handleStateChangeEvent}
    { ...otherProps }
 />

以及我的 handleStateChangeEvent 函数：

const handleStateChangeEvent: GridEventListener<'stateChange'> = useCallback(() => {

  // if (!gridInitialized) return;  // ???

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

我尝试只绑定到特定的 DataGridPremium changeEvent，但错过了我想捕捉的更改。

例如：

<DataGridPremium
    initialState={{
        ...initialState,
        sorting: {
            // Sort first column by default.
            sortModel: [{ field: columns[0].field, sort: 'asc' }],
            ...initialState?.sorting,
        },
    }}
    onColumnOrderChange={handleEvent}
    onColumnWidthChange={handleEvent}
    onPreferencePanelClose={handleEvent}
    { ...otherProps }
 />

和

  // Save state to local storage
  const handleEvent: GridEventListener<
    'columnOrderChange' | 'columnWidthChange' | 'preferencePanelClose'
  > = useCallback(
    () => {
      saveState(
        {
          ...apiRef.current.exportState(),
          preferencePanel: { open: false },
        },
        STATE_KEY
      );
    },
    [STATE_KEY, apiRef]
  );

谢谢