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

Question

I'm using a Dialog component from Material-UI which, for the most part, is working correctly. However, if I click away from the Dialog, the Dialog will disappear (as expected) but sometimes, it remains in the DOM with its opacity set to 0, and I can't click anything else since the Dialog is in the way. This is a small sample of my code:

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

This bug doesn't always occur which makes it tricky to debug. I've only been using React for about a month, but I'm wondering if it's a state problem, or maybe some sort of race condition. Any suggestions?

Edit: This also occurs when a DropzoneDialog appears, to upload a file.

Answer 1

This also works:

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

where in the styles file you have:

  displayNone: {
    display: "none"
  }

Answer 2

In case anyone else has this same issue, I found the answer:

Elsewhere in the app, useEffect() was stuck in a loop and running extremely frequently which slowed the app down, causing this problem.