reactjs - Hur sparar man MUI X Data Grid-tillståndet vid ändringar som sker efter den initiala tillståndsladdningen?

Jag implementerar för närvarande ett rutnätsstatuspersistens i localStorage så att vilken användare som helst som gjorde tidigare ändringar i rutnätsstatusen kommer att få tillbaka det vid återbesök:

Målinriktade förändringar för att spara

• kolumners ordning/storlek/synlighet
• sök
• sortering

Jag försöker använda DataGridPremium onStateChange-händelsen, även om händelsen utlöses när tillståndet initialiseras. Jag vill inte det eftersom jag inte vill spara tillståndet när användaren inte har ändrat något i rutnätet.

Finns det ett sätt som jag kan hoppa över initialState-ändringshändelsen?

Kan vara ett evenemang jag kan binda till som skulle tala om för mig att rutnätet har slutfört laddningen av sin initialState och spara ett komponenttillstånd "gridInitialized".

Här är ett utdrag av mitt rutnät:

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

Och till min handleStateChangeEvent-funktion:

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

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

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

Jag försökte bara binda på specifik DataGridPremium changeEvent, men jag missade de ändringar jag ville fånga.

Till exempel:

<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 }
 />

och

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

Tack