javascript - 从 Material UI 表和模态中理解内存泄漏

问题描述

我的 React 应用程序中有两个文件，我认为其中一个文件发生了内存泄漏。本质上，其中一个文件是 a MaterialTable，另一个是 modal using Dialog，它们都是 Material UI Core 组件。

在我的MaterialTable中，我基本上有一个按钮可以打开模式，其中包含比表格中显示的更多信息。作为我的代码的摘要，这些是有问题的两个文件：

myTable.js

const [isModalOpen, setIsModalOpen] = useState(false)

const myTable = () => {
  return (
    <div>

    <MyModal
      isModalOpen={isModalOpen}
      setIsModalOpen={setIsModalOpen}
    />

    <MaterialTable
      data={/*my data goes here*/}
      actions={[
        {
          icon: "edit",
          tooltip: "More information",
          onClick: (_event, rowData) => {
            /* open modal */
            setIsModalOpen(true)
          }
        }
      ]}

    </div>
  )
}

随后的模态文件看起来像这样：

myModal.js

const MyModal = (isModalOpen, setIsModalOpen) => {
  return (
    <Dialog open={isModalOpen} maxWidth={"md"} fullWidth={true}
      /* display some stuff in the modal view
    </Dialog>
  )
}

当我从内部多次打开和关闭模式时myTable.js，出现内存泄漏。从 DevTools 中调查内存后，我可以看到以下内容（为糟糕的分辨率道歉）：

两个对象/字符串似乎都来自 Material UI。在其中一个对象示例中，我可以看到它可能来自node_modules/@material-ui/core/esm/Slider/Slider.js. 我不确定我需要做什么才能解决这个问题。

澄清一下，我的代码的任何部分都没有calc(...)字符串，因此我相信它来自 Material UI 组件之一。

我可以从哪里开始识别问题和/或如何解决它？

标签： javascriptreactjsmemory-leaksreact-hooks

问题是我在不同的文件中定义optionsand columnsfor 。Material-Table事实证明，这可能是一个已知问题，如下所示：https ://github.com/mbrn/material-table/issues/2650

因此，在定义表的同一组件中声明options和解决了内存泄漏问题。columns

javascript - 从 Material UI 表和模态中理解内存泄漏 - React

问题描述

解决方案

推荐阅读