mui 对话框未正确关闭

Question

我有一个对话框没有正确关闭的问题。 Dialog open 设置为 state 变量初始化为 true，并立即更改为 false。 对话框没有正确关闭，应用程序没有响应。

我已经在下面的沙箱中演示了这一点，其中按钮无法单击，但它应该可用。

编辑：明确。 该对话框不应该打开。 但是对话框外的按钮（带有文本“a button”）应该是可点击的。

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

Answer 1

此代码将起作用：

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

您不需要 useEffect 立即更改 state，您可以将 false 作为所需的初始值传递给 state。现在按钮“一个按钮”正在工作。

编辑：要使代码在不删除 useEffect 的情况下工作，请添加条件渲染：

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

我最好的猜测是，在你的代码中，对话无论如何都会被渲染，即使它没有显示，因为起初“打开”是真的。 所以为了让它不被渲染，或者有条件地渲染，你应该检查state。