React / MUI Datagrid 保留对导致内存泄漏的旧行的引用

Question

在我的 React 应用程序中，我有以下组件结构：

组件A（Home.js）：

• 具有保持 10 个对象数组的状态
• 有一个子组件 B，它将状态传递给
• 有一个方法可以获取 10 个新对象并将状态设置为该数据

B组份：

• 接收对象数组作为道具
• 在 MUI 数据网格中显示它们
• 更改数据网格中的页面时，从执行 fetch 方法的组件 A 调用回调

现在当我查看内存堆时，我看到了那 10 个对象。当我更改组件 B 中数据网格的页面时，组件 A 获取新数据，从中创建 10 个新对象，将状态设置为新数组，然后通过道具将其传递给 B。一切正常。

然而，由于我不明白的原因，之前的10个对象留在内存中。如果我重复这个过程，堆每次都会增加 10 个对象，即使状态设置为 10 个新对象（这 10 个新对象没有添加，它们替换了以前的状态）。

这里是我的组件（从不太可能影响问题的代码中截取）：

• 组件A（主页）：

        const Home = () => {
    const [results, setResults] = useState({});
    // store the url for the next/previous page from server pagination. I stripped the part where this is set, since its irrelevant here.
    const [nextPageLink, setNextPageLink] = useImmer({ Patient: "" });
    const [prevPageLink, setPrevPageLink] = useImmer({ Patient: "" });
  
  
    // function that fetches 10 new rows, either next 10 or previous 10
    const updatePage = async (nextOrPrev) => {
        if (nextOrPrev == "next") {
            if (!nextPageLink["Patient"]) return;
            else {
                const result = await getPageData(nextPageLink["Patient"]);
                console.log(result);
                setNextPageLink((prev) => {
                    return { ...prev, Patient: result["nextLink"] };
                });
                setPrevPageLink((prev) => {
                    return { ...prev, Patient: result["prevLink"] };
                });
                setResults((prev) => {
                    return { ...prev, Patient: result["data"] };
                });
            }
        } else if (nextOrPrev == "previous") {
            if (!prevPageLink["Patient"]) return;
            else {
                const result = await getPageData(prevPageLink["Patient"]);
                console.log(result);
                setNextPageLink((prev) => {
                    return { ...prev, Patient: result["nextLink"] };
                });
                setPrevPageLink((prev) => {
                    return { ...prev, Patient: result["prevLink"] };
                });
                setResults((prev) => {
                    return { ...prev, Patient: result["data"] };
                });
            }
        } 
    };
  
    // render section
    return (
        <CustomDataGrid
            key={resourceType}
            resourceType={resourceType}
            columns={columns}
            rows={results[resourceType]}
            rowCount={resultCount[resourceType]}
            updatePage={updatePage}
        />
    );
  

  };

• 组件 B（包含数据网格的自定义组件）：

export default function CustomDataGrid({
    resourceType,
    columns,
    rows,
    rowCount,
    updatePage,
}) {
    const [paginationModel, setPaginationModel] = React.useState({
        page: 0,
        pageSize: 10,
    });
    const [loading, setloading] = useState(false);
    const nextOrPrev = useRef("");

      // When I change the page, call the callback from Component A (Home) to fetch 10 new rows
    useEffect(() => {
        updatePage(resourceType, nextOrPrev.current);
    }, [paginationModel.page]);

    useEffect(() => {
        setloading(false);
    }, [rows]);



    return (
            <DataGrid
                rows={rows}
                columns={columns}
                rowsPerPageOptions={[10]}
                pageSize={10}
                        // Change the page of the datagrid
                onPageChange={(newPage) => {
                    nextOrPrev.current =
                        newPage > paginationModel.page ? "next" : "previous";
                    setPaginationModel({ ...paginationModel, page: newPage });
                }}
                
                onSelectionModelChange={(newSelection) => {
                    if (!loading) setSelectedResources(newSelection);
                }}
                selectionModel={selectedResources}
                experimentalFeatures={{ newEditingApi: true }}
                disableVirtualization
                rowCount={rowCount}
                paginationModel={paginationModel}
                paginationMode="server"
                pagination
                keepNonExistentRowsSelected
            />
    );
}

正如我所说，显示和获取等一切正常，唯一的问题是内存随着每次页面更改而不断增长，即使我没有在代码中的任何地方特别保留对前几行的引用，但它们'仍然没有垃圾收集。非常感谢我能得到的任何帮助！

编辑：我尝试了 useState 和 useImmer，没有区别。