React - 保存相互通信的表之间的状态 [datagrid]

Question

我在使用 Material UI 库与 TypeScript 进行 React 时遇到问题，这与保存两个数据网格的状态有关，这两个数据网格在页面刷新后会双向影响它们的状态。

目标

有一个数据网格/表，其中选择了行（被认为是收藏夹）并且这些相同的行显示在另一个表（这是收藏夹表）中。然而，在收藏夹表中，可以取消选择存在的行，当它们被取消选择时，这些行将从收藏夹表中删除，并且在包含所有行的表中，这些行以前被选中，它们被取消选择。

然而，这一切都必须与 Local Storage 保持一致，Local Storage 必须存储收藏行的标识，以便用户在不同时期或会话之间访问页面时，可以像他一样访问它们（datagrids'）离开他们，表中所有行的选定行以及收藏夹表中最喜欢的行。

到目前为止我得到了什么！

如果favorites datagrid不存在，则页面刷新后datagrid中所有行的选择保留。

然而，由于存在两个数据网格，更新页面后，没有一个表保持其先前状态的保存。

结论

我将在出现问题的代码下方留下代码，以及带有上述代码的 codesandbox 链接，以及我将留下屏幕录像的链接，我将在其中演示第一个示例表（不与收藏夹表通信）保留其状态，以及第二个示例，其中两个表不会发生这种情况。

• 完整代码链接

• 视频（屏幕录制）

PeopleTables.tsx

import { Box } from "@mui/material";
import {
  DataGrid,
  GridColDef,
  GridRowSelectionModel,
  GridRowsProp,
} from "@mui/x-data-grid";
import React, { useEffect, useState } from "react";
import { People } from "../../data/people";
import { LocalStorageTypes, Person } from "../../models";
import styles from "./styles/SaveFavorites.module.scss";
export interface PeopleTablesProps {}

const allPeople: Person[] = People;

// Set up for Data Drid
const rows: GridRowsProp = allPeople;
const columns: GridColDef[] = [
  {
    field: "first_name",
    headerName: "First Name",
    width: 150,
    flex: 1,
    minWidth: 150,
  },
  {
    field: "last_name",
    headerName: "Last Name",
    width: 100,
    flex: 1,
    minWidth: 100,
  },
  {
    field: "gender",
    headerName: "Gender",
    width: 150,
    flex: 1,
    minWidth: 150,
  },
  {
    field: "country",
    headerName: "Country",
    width: 150,
    flex: 1,
    minWidth: 150,
  },
];

const PeopleTables: React.FC<PeopleTablesProps> = () => {
  // Get Selected Rows from Local Storage
  const storedFavorites = JSON.parse(
    localStorage.getItem(LocalStorageTypes.FAVORITES) || "[]"
  );

  // Save id from selected Row
  const [rowSelectionModel, setRowSelectionModel] =
    useState<GridRowSelectionModel>(storedFavorites);

  const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);

  // Add selected rows ID to localStorage
  if (rowSelectionModel !== undefined) {
    localStorage.setItem(
      LocalStorageTypes.FAVORITES,
      JSON.stringify(rowSelectionModel)
    );
  }

  useEffect(() => {
    // Update selectedPeople
    setSelectedPeople(
      rowSelectionModel.map((selectedId) => {
        const row = rows.find((item) => item.id === selectedId) as Person;
        const { id, ...rest } = row;
        return { id, ...rest };
      })
    );
  }, [rowSelectionModel, rows]);

  return (
    <>
      <h2>All the people</h2>
      <div style={{ height: 300, width: "100%" }}>
        {/*  DATAGRID WITH ALL */}
        <Box
          sx={{
            height: "400px",
            width: "100%",
            "& .MuiDataGrid-columnHeaders": {
              backgroundColor: "#A9A9A9",
            },
          }}
        >
          <DataGrid
            checkboxSelection
            onRowSelectionModelChange={(newRowSelectionModel) => {
              setRowSelectionModel(newRowSelectionModel);
            }}
            rowSelectionModel={rowSelectionModel}
            initialState={{
              pagination: {
                paginationModel: {
                  pageSize: 10,
                },
              },
            }}
            pageSizeOptions={[5, 10, 25]}
            rows={rows}
            columns={columns}
            className={styles.savefavorites}
            sx={{
              "& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer":
                {
                  display: "none",
                },
            }}
          />
        </Box>

        {/* FAVOURITES DATAGRID */}
        <h2>Favourite people</h2>
        <Box
          sx={{
            height: "400px",
            width: "100%",
            "& .MuiDataGrid-columnHeaders": {
              backgroundColor: "#A9A9A9",
            },
          }}
        >
          <DataGrid
            checkboxSelection
            onRowSelectionModelChange={(newRowSelectionModel) => {
              setRowSelectionModel(newRowSelectionModel);
            }}
            rowSelectionModel={rowSelectionModel}
            initialState={{
              pagination: {
                paginationModel: {
                  pageSize: 10,
                },
              },
            }}
            pageSizeOptions={[5, 10, 25]}
            rows={selectedPeople}
            columns={columns}
            className={styles.savefavorites}
            sx={{
              "& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer":
                {
                  display: "none",
                },
            }}
          />
        </Box>
      </div>
    </>
  );
};

export default PeopleTables;

为了解决这一切，以及上面视频末尾出现的错误 `Warning: Cannot update a component (`PeopleTables`) while rendering a different component (`ForwardRef(DataGrid)`).`，我已经尝试使用 stackoverflow 上的其他帖子解决此问题，其中存在关于在页面刷新后维护表和数据网格的状态以及求助于 GPT Chat 的问题，但没有成功。

我想知道有没有人知道在刷新页面时如何维护两个相互通信的表的状态？