为何MUI Dialog在删除函数执行时自动关闭？需完成删除后再关闭

问题分析 #

弹窗在删除操作执行过程中意外关闭，核心原因可能是：删除触发了组件重渲染/卸载（比如列表项被移除导致DeleteButton组件卸载，本地open状态被重置为false），或者Dialog的默认关闭逻辑（外部点击、ESC键）被误触发。

解决方案 #

方案1：手动控制弹窗关闭时机

在删除操作完成后显式关闭弹窗，同时禁用Dialog的外部点击和ESC关闭，避免操作过程中误触关闭。

修改handleDeleteItem函数，添加手动关闭弹窗的逻辑：

const handleDeleteItem = async () => {
  console.log("start")
  await deleteItem()
  console.log("finish")
  setOpen(false) // 删除完成后手动关闭弹窗
}

修改Dialog组件，添加禁用外部点击和ESC的属性：

<Dialog
  open={open}
  onClose={handleClose}
  disableOutsideClick
  disableEscapeKeyDown>

方案2：避免组件卸载导致状态丢失

如果DeleteButton是在列表循环中渲染，删除数据后对应的列表项会被移除，导致DeleteButton组件卸载，本地open状态被重置。此时需要将弹窗状态提升到父组件：

父组件代码示例：

import { useState } from 'react';

function ParentComponent() {
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [targetDeleteItem, setTargetDeleteItem] = useState(null);

  // 统一处理删除逻辑
  const handleConfirmDelete = async () => {
    await deleteItem(targetDeleteItem);
    setDeleteDialogOpen(false);
  };

  return (
    <div>
      {/* 列表渲染 */}
      {items.map(item => (
        <div key={item.id}>
          {/* 其他内容 */}
          <DeleteForeverIcon 
            onClick={() => {
              setTargetDeleteItem(item);
              setDeleteDialogOpen(true);
            }}
          />
        </div>
      ))}

      {/* 弹窗移到父组件，避免随列表项卸载 */}
      <Dialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        disableOutsideClick
        disableEscapeKeyDown>
        <DialogActions>
          <Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
          <Button onClick={handleConfirmDelete}>Confirm</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

这样弹窗状态由父组件控制，即使列表项被删除，弹窗依然会保持打开，直到删除操作完成后才关闭。

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