React组件传参后旧实例未销毁，如何清除旧PopTrustToast实例？

1. 创建新Toast前手动关闭旧实例 #

react-hot-toast 提供了 toast.dismiss() 方法，可直接关闭所有已存在的 Toast 实例，或者通过 ID 精准关闭指定实例，这是最直接解决多实例问题的方式：

关闭所有实例：

const handleApply = () => {
  // 先清除所有已存在的Toast
  toast.dismiss();
  // 再创建新的Toast弹窗
  toast(<PopTrustToast position={selectedPosition} />);
};

精准关闭指定实例：

如果需要保留其他 Toast 仅关闭当前评论弹窗，可跟踪 Toast 的 ID：

let currentReviewToastId = null;

const handleApply = () => {
  // 关闭之前创建的评论Toast
  if (currentReviewToastId) {
    toast.dismiss(currentReviewToastId);
  }
  // 创建新Toast并保存ID
  currentReviewToastId = toast(<PopTrustToast position={selectedPosition} />);
};

2. 检查key属性的正确使用 #

如果你的 PopTrustToast 是作为固定组件渲染而非通过 toast() 函数调用，需确保 key 值随配置变化而更新，触发组件卸载重建：

import { useState } from 'react';

// 父组件中
const [toastConfigKey, setToastConfigKey] = useState(0);

const handleApply = () => {
  // 更新key值，触发组件重建
  setToastConfigKey(prev => prev + 1);
};

// 渲染时
{showToast && <PopTrustToast key={toastConfigKey} position={selectedPosition} />}

如果是通过 toast() 传递组件，需将 key 直接绑定到配置参数：

toast(<PopTrustToast key={selectedPosition} position={selectedPosition} />);

3. 清理组件内部未释放的副作用 #

检查 PopTrustToast 组件内部是否存在未清理的定时器、订阅等副作用，这类残留会导致组件实例看似未销毁：

import { useEffect } from 'react';

const PopTrustToast = ({ position }) => {
  useEffect(() => {
    const timer = setInterval(() => { /* 业务逻辑 */ }, 1000);
    // 组件卸载时清理定时器
    return () => clearInterval(timer);
  }, [position]); // 依赖项随配置更新

  return <div>{/* Toast内容 */}</div>;
};

4. 确认react-hot-toast的使用逻辑 #

toast() 函数每次调用都会创建新实例，默认不会自动关闭旧实例（除非设置了 duration）。因此核心逻辑是每次Apply时先清理旧实例，再创建新实例，这比依赖React的key机制更贴合react-hot-toast的设计。

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