Chakra UI封装独立通知组件后如何避免toast重复弹出

问题根因 #

你之前的封装逻辑中，每次调用Notification函数都会重新执行createStandaloneToast生成全新的toast实例，不同实例之间的激活状态不共享，所以isActive判断无法生效。

修复步骤 #

1. 改造公共通知组件 #

将toast实例改为全局单例，新增id参数用于防重复判断，代码如下：

import React from 'react';
import { createStandaloneToast } from '@chakra-ui/react';
import theme from '../theme';

// 全局仅初始化一次toast实例，保证激活状态共享
const toast = createStandaloneToast({ theme: theme });

/**
 * 公共通知方法
 * @param {string} title 通知标题
 * @param {string} description 通知描述
 * @param {string} status 通知类型：success/error/warning/info
 * @param {string|number} [id] 可选通知唯一标识，用于防重复判断，不传则默认用标题+描述生成
 */
const Notification = (title, description, status, id) => {
  const toastId = id || `${title}-${description}`;
  
  // 仅当当前标识的通知未激活时才弹出
  if (!toast.isActive(toastId)) {
    toast({
      id: toastId,
      title,
      description,
      status,
      duration: 3000,
      position: 'bottom-right',
      isClosable: true,
    });
  }

  return <></>;
};

export default Notification;

2. 业务组件调用 #

调用时可选择传入自定义id，或者不传直接依赖默认的内容生成规则实现同内容通知防重复：

import React from 'react';
// ...其他引入

const RemoveToDo = () => {
    const remove = () => {
        // ...业务删除逻辑
        // 传入自定义唯一id，适配同内容但需要区分场景的需求
        Notification('Tarea eliminada.', 'Has eliminado la tarea.', 'success', 'remove-todo-success');
        
        // 也可以不传id，相同标题+描述的通知会自动去重
        // Notification('Tarea eliminada.', 'Has eliminado la tarea.', 'success');
    };
};

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