React确认对话框仅首次显示，后续点击无响应问题求助

问题现象 #

实现的确认对话框流程：点击click按钮弹出对话框，点击对话框的cancel按钮关闭对话框。但首次点击click正常显示，后续再次点击该按钮时对话框不再弹出。

问题原因 #

当前ConfirmationDialog组件内部维护了open状态，点击cancel后将open设为false，但此时App组件中的confirm状态仍为true，组件并未被卸载。后续再次点击click按钮时，setConfirm(true)不会触发组件重新渲染（因为状态值无变化），open状态保持为false，导致对话框无法弹出。

解决方案 #

将对话框的显示状态（open）提升到父组件App中统一管理，子组件仅负责接收状态和回调，确保点击click按钮时状态能正确重置：

修改后的App.js #

import ConfirmationDialog from "./ConfirmationDialog";
import { useState } from "react";

export default function App() {
  const [confirm, setConfirm] = useState(false);
  
  const handleClick = () => {
    setConfirm(true);
  };
  
  const handleClose = () => {
    setConfirm(false);
  };

  return (
    <>
      <button onClick={handleClick}>click</button>
      <ConfirmationDialog open={confirm} onClose={handleClose} />
    </>
  );
}

修改后的ConfirmationDialog.js #

import React from "react";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";

function ConfirmationDialogRaw(props) {
  const { onClose, open, ...other } = props;
  
  const handleCancel = () => {
    onClose();
  };

  const handleOk = () => {
    onClose();
  };

  return (
    <Dialog
      sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
      maxWidth="xs"
      open={open}
      {...other}
    >
      <DialogTitle>Title</DialogTitle>
      <DialogContent dividers>
        <Button autoFocus onClick={handleCancel}>
          Cancel
        </Button>
        <Button onClick={handleOk}>Ok</Button>
      </DialogContent>
      <DialogActions></DialogActions>
    </Dialog>
  );
}

function ConfirmationDialog({ open, onClose }) {
  return (
    <Box sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
      <ConfirmationDialogRaw
        id="confirmationId"
        keepMounted
        open={open}
        onClose={onClose}
      />
    </Box>
  );
}
export default ConfirmationDialog;

说明 #

• 状态提升后，父组件App完全控制对话框的显示与隐藏，点击click时设置confirm为true，点击cancel/Ok时设置confirm为false。
• 移除了子组件内部的useState，改为接收父组件传递的open和onClose，确保每次点击click按钮时对话框状态能正确重置为显示状态。

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