如何为购物车设备删除操作（MUI Dialog实现）添加异步成功通知？

核心思路 #

要在弹窗关闭后精准触发删除成功通知，关键是区分「用户取消关闭弹窗」和「删除完成后关闭弹窗」两种场景，同时利用React的状态变化监听来触发通知逻辑。

具体实现步骤 #

1. 新增状态标记删除结果：添加isDeleteSuccess状态，用来标记本次弹窗关闭是因为删除操作完成，而非用户取消。
2. 调整删除流程的状态更新顺序：在deleteItem调用成功后，先标记删除成功状态，再关闭弹窗、结束加载状态。
3. 用useEffect监听弹窗关闭事件：当弹窗从显示变为隐藏时，检查是否是删除成功触发的关闭，若是则显示通知，并重置标记状态。

修改后的代码示例 #

import { useState, useEffect } from 'react';
// 示例用MUI的Snackbar做通知组件，可替换为项目内现有通知组件
import { Snackbar, Alert } from '@mui/material';

export function Delete() {
  const [alertShown, setAlertShown] = useState(false);
  const [alertLoading, setAlertLoading] = useState(false);
  // 新增状态：标记是否为删除成功后关闭弹窗
  const [isDeleteSuccess, setIsDeleteSuccess] = useState(false);
  // 通知显示状态
  const [openNotification, setOpenNotification] = useState(false);

  const onNo = () => {
    setAlertShown(false);
  };

  const onYes = async () => {
    setAlertLoading(true);
    try {
      await deleteItem();
      // 删除成功后先标记状态
      setIsDeleteSuccess(true);
    } catch (err) {
      // 处理删除失败逻辑，比如显示错误提示
      console.error('删除失败:', err);
    } finally {
      // 无论成败，关闭弹窗并结束加载
      setAlertShown(false);
      setAlertLoading(false);
    }
  };

  // 监听弹窗关闭事件，触发成功通知
  useEffect(() => {
    if (!alertShown && isDeleteSuccess) {
      setOpenNotification(true);
      // 重置标记，避免下次误触发
      setIsDeleteSuccess(false);
    }
  }, [alertShown, isDeleteSuccess]);

  // 关闭通知的回调
  const handleCloseNotification = (event, reason) => {
    if (reason === 'clickaway') return;
    setOpenNotification(false);
  };

  return (
    <ButtonGroup>
      <div onClick={() => setAlertShown(true)}>
        <DeleteForeverIcon />
      </div>

      {alertShown && (
        <Dialog open={alertShown}> {/* 修正原代码open属性绑定错误 */}
          {alertLoading ? (
            <div><Spinner /></div>
          ) : (
            <DialogActions>
              <Button onClick={onNo}>Cancel</Button>
              <Button onClick={onYes}>Confirm</Button>
            </DialogActions>
          )}
        </Dialog>
      )}

      {/* 删除成功通知 */}
      <Snackbar
        open={openNotification}
        autoHideDuration={3000} // 自动关闭时长（3秒）
        onClose={handleCloseNotification}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert severity="success" onClose={handleCloseNotification}>
          设备删除成功！
        </Alert>
      </Snackbar>
    </ButtonGroup>
  );
}

额外说明 #

• 修正了原代码中Dialog组件open属性的绑定错误，改为绑定alertShown状态。
• 加入try/catch捕获删除接口的异常，避免因接口报错导致弹窗一直处于加载状态。
• 通知组件采用MUI的Snackbar+Alert实现，可根据项目现有组件库替换对应逻辑。

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