mui 对话框未正确关闭

Question

I have a problem with a dialog not closing properly. Dialog open is set to a state variable intialized as true, and immediately changed to false. The dialog doesn't close properly, and the app does not respond.

I have demonstrated this in the following sandbox where the button can not be clicked, though it should be available.

EDIT: To make clear. The dialog is not supposed to ever open. But the button outside the dialog (with the text "a button") should be clickable.

https://codesandbox.io/s/adoring-benji-300mcm

Answer 1

This code will work:

export default function App() {
  const [open, setOpen] = useState(false);

  console.log(open);

  return (
    <div>
      <Dialog open={open} height="100px" width="100px" id="111">
        <button onClick={() => setOpen(false)}>close</button>
      </Dialog>
      <button onClick={() => console.log("click")}>a button</button>
    </div>
  );
}

You don't need the useEffect to change state immediately, you could just pass false as a desired initial value to the state. Now the button "a button" is working.

EDIT : To make the code working without removing useEffect, add conditional rendering:

export default function App() {


const [open, setOpen] = useState(true);

  useEffect(() => setOpen(false), []);
  console.log(open);

  return (
    <div>
      {open && (
        <Dialog open={open} height="100px" width="100px" id="111">
          <button onClick={() => setOpen(false)}>close</button>
        </Dialog>
      )}
      <button onClick={() => console.log("click")}>a button</button>
    </div>
  );
}

My best guess is that in your code the Dialogue gets rendered anyways, even though it is not displayed, because at first "open" was true. So in order for it not to be rendered, or to be rendered conditionally, you should check state.