React删除组件中，如何在弹窗关闭后显示元素删除成功通知？

核心思路 #

在现有组件中新增通知状态管理，删除操作完成后触发成功通知的显示，可搭配定时器自动隐藏通知，也支持手动关闭。

具体实现步骤 #

1. 添加通知控制状态
   在组件中新增用于管理成功通知显示的状态：

const [showSuccessNotify, setShowSuccessNotify] = useState(false);

2. 调整删除确认逻辑
   修改onYes函数，在删除完成并关闭弹窗后触发通知显示，同时设置定时器自动隐藏通知（可选）：

const onYes = async () => {
    setAlertLoading(true);
    try {
        await deleteItem();
        setAlertShown(false);
        // 触发成功通知
        setShowSuccessNotify(true);
        // 3秒后自动关闭通知
        setTimeout(() => setShowSuccessNotify(false), 3000);
    } catch (error) {
        // 可选：处理删除失败场景，比如显示错误提示
        console.error('删除失败:', error);
    } finally {
        setAlertLoading(false);
    }
};

3. 渲染成功通知组件
   利用和现有组件库一致的Snackbar（Material UI组件）渲染通知，将其加入组件返回结构：

{showSuccessNotify && (
    <Snackbar
        open={showSuccessNotify}
        autoHideDuration={3000}
        onClose={() => setShowSuccessNotify(false)}
        message="元素已成功删除"
        action={
            <Button color="inherit" size="small" onClick={() => setShowSuccessNotify(false)}>
                关闭
            </Button>
        }
    />
)}

修改后的完整代码 #

import { useState } from 'react';
import { ButtonGroup, Dialog, DialogActions, Button, Spinner, Snackbar } from '@mui/material';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';

export function Delete() {
  const [alertShown, setAlertShown] = useState(false);
  const [alertLoading, setAlertLoading] = useState(false);
  const [showSuccessNotify, setShowSuccessNotify] = useState(false);

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

  const onYes = async () => {
      setAlertLoading(true);
      try {
          await deleteItem();
          setAlertShown(false);
          setShowSuccessNotify(true);
          setTimeout(() => setShowSuccessNotify(false), 3000);
      } catch (error) {
          console.error('删除操作失败:', error);
          // 可选：添加错误通知逻辑
      } finally {
          setAlertLoading(false);
      }
  };

  // 替换为实际的删除接口调用
  const deleteItem = async () => {
      await new Promise(resolve => setTimeout(resolve, 1000));
  };
  
  return (
    <ButtonGroup>
        <div onClick={() => setAlertShown(true)}>
            <DeleteForeverIcon />
        </div>

        {alertShown && (
            <Dialog open={alertShown}>
                {alertLoading 
                    ? <div><Spinner /></div>
                    : (
                        <DialogActions>
                            <Button color="error" onClick={onNo}>Cancel</Button>
                            <Button onClick={onYes}>Confirm</Button>
                        </DialogActions>
                    )}                   
            </Dialog>
        )}

        {showSuccessNotify && (
            <Snackbar
                open={showSuccessNotify}
                autoHideDuration={3000}
                onClose={() => setShowSuccessNotify(false)}
                message="元素已成功删除"
                action={
                    <Button color="inherit" size="small" onClick={() => setShowSuccessNotify(false)}>
                        关闭
                    </Button>
                }
            />
        )}
    </ButtonGroup>
  );
}

注意点 #

• 原代码中Dialog组件的open属性绑定错误，已修正为绑定alertShown状态
• 若不需要自动关闭通知，可移除autoHideDuration和定时器，仅保留手动关闭逻辑
• 建议补充错误捕获逻辑，覆盖删除失败的场景，提升用户体验

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