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。