React.js 对话框组件消失但仍保留在 DOM 中答案

【问题标题】：React.js dialog component disappears yet remains in DOMReact.js 对话框组件消失但仍保留在 DOM 中
【发布时间】：2020-06-05 16:37:22
【问题描述】：

我正在使用 Material-UI 中的 Dialog 组件，该组件在大多数情况下都可以正常工作。但是，如果我单击远离对话框，对话框将消失（如预期的那样），但有时，它仍保留在 DOM 中，其不透明度设置为 0，并且我无法单击其他任何内容，因为对话框挡住了路。这是我的代码的一个小示例：

  const [openDialog, setOpenDialog] = React.useState(false);

  React.useEffect(() => {
    // Get data for ReactTable
  }, []);

  return(
    <div>
      // Other components
      <Button color="white" onClick={() => setOpenDialog(true)}>
         Open Dialog
      </Button>
      // Other components
      <Dialog open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
        // ReactTable and close button
      </Dialog>
    </div>
  )

这个错误并不总是发生，这使得调试很棘手。我只使用 React 大约一个月，但我想知道这是一个状态问题，还是某种竞争条件。有什么建议吗？

编辑：当出现 DropzoneDialog 以上传文件时也会发生这种情况。

【问题讨论】：

标签： javascript reactjs dialog material-ui

【解决方案1】：

这也有效：

  <Dialog className={openDialog ? "" : classes.displayNone} open={openDialog} maxWidth="md" onClose={() => setOpenDialog(false)}>
   // ReactTable and close button
  </Dialog>

您在样式文件中的位置：

  displayNone: {
    display: "none"
  }

【讨论】：

【解决方案2】：

如果其他人有同样的问题，我找到了答案：

在应用程序的其他地方，useEffect() 卡在一个循环中并且非常频繁地运行，这会减慢应用程序的速度，从而导致此问题。

【讨论】：