reactjs - איך לשמור את מצב MUI X Data Grid כאשר מתרחשות שינויים לאחר טעינת המצב ההתחלתי?

אני כרגע מיישם שמירת מצב רשת ב-localStorage כך שכל משתמש שביצע שינויים קודמים במצב הרשת יקבל את זה בחזרה כאשר הוא מבקר שוב:

שינויים ממוקדים לחיסכון

• סדר/גודל/נראות עמודות
• לחפש
• מיון

אני מנסה להשתמש באירוע onStateChange של DataGridPremium, למרות שהאירוע מופעל כאשר המצב מאותחל. אני לא רוצה את זה כי אני לא רוצה לשמור את המצב כאשר המשתמש לא שינה דבר ברשת.

האם יש דרך שאוכל לדלג על אירוע שינוי ה-initialState?

יכול להיות שיש אירוע שאוכל לקשר אליו שיגיד לי שהרשת סיימה לטעון את ה-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]);

ניסיתי לקשר רק לאירוע changeEvent ספציפי של DataGridPremium, אבל פספסתי שינויים שרציתי ללכוד.

לדוגמה:

<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]
  );

תודה