React Material-UI中useState控制自定义Dialog弹窗无法正常打开问题

useState 的初始值仅在组件首次挂载时生效，后续父组件传入的 dilaogOpenProp 属性更新不会同步到子组件内部的 dialogOpenState 状态。
你在父组件点击按钮更新 dialogOpen 为 true 时，CustomDialog 已经完成挂载，内部 state 还停留在初始值 false，所以弹窗不会触发打开。手动把初始值设为 true 时，组件挂载时就拿到正确值，所以能正常显示。

• 方案1（推荐）：子组件不维护独立状态，直接使用父组件传入的属性控制弹窗
  修改CustomDialog代码，删除内部的state定义，直接把Dialog的open属性绑定到props.dilaogOpenProp：

const CustomDialog = (props) => {
  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={props.dilaogOpenProp} // 直接用props控制
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button>ooooh.</Button>
        </DialogActions>
      </Dialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}

export default CustomDialog;

注：你代码里的属性名dilaogOpenProp是拼写错误，正确拼写为dialogOpenProp，建议修正避免后续踩坑

• 方案2：若子组件需要独立维护状态，新增useEffect监听属性变化同步更新内部state
  在CustomDialog中添加useEffect监听props的变化：

const CustomDialog = (props) => {
  const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp);
  // 新增监听逻辑
  React.useEffect(() => {
    setOpen(props.dilaogOpenProp)
  }, [props.dilaogOpenProp])

  return (
    <>
      {/* 原有代码不变 */}
    </>
  );
}

补充建议 #

当前Dialog的onClose回调是空实现，无法正常关闭弹窗，建议父组件把状态更新方法也传入子组件，保证父子状态同步：
父组件调用时修改为：

<CustomDialog 
  dilaogOpenProp={dialogOpen}
  onClose={() => setDialogueOpen(false)}
/>

子组件Dialog绑定onClose：

<Dialog
  onClose={props.onClose}
  // 其余属性不变
>

内容的提问来源于stack exchange，提问作者Abhshek