React-Toastify 中并发请求场景下的 Toast 冲突问题分析与解决方案

问题背景

在使用 React-Toastify 库时，开发者在处理多个并发 API 请求的场景下遇到了 Toast 通知无法正常关闭的问题。具体表现为：当多个请求同时发出时，只有第一个请求的 Toast 能够正常显示和关闭，其他请求的 Toast 会陷入无限加载状态。

问题分析

这个问题主要源于以下几个方面：

1. Toast ID 管理不当：在并发请求场景下，多个 Toast 实例可能共享或冲突使用相同的 ID
2. 生命周期控制不完善：Toast 的显示和关闭逻辑没有充分考虑并发场景下的时序问题
3. 状态清理不彻底：在 Toast 关闭后，相关的状态和引用没有完全清理干净

解决方案

1. 改进 Toast ID 管理

为每个请求生成唯一的标识符，确保每个 Toast 都有独立的 ID：

class ToastUtil {
  constructor(unique_key) {
    this.toast_id = unique_key; // 直接使用传入的唯一键
    // ...其他初始化
  }
}

2. 优化 Toast 生命周期控制

使用 React 的状态管理来精确控制 Toast 的显示和关闭：

const [isToastActive, setIsToastActive] = useState(false);
const [isCloseToastActive, setisCloseToastActive] = useState(false);

3. 添加防抖和超时机制

引入定时器机制，确保 Toast 能够在一定时间后自动关闭：

const exitBtnTimeoutRef = useRef<NodeJS.Timeout | null>(null);

// 在适当的时候设置定时器
exitBtnTimeoutRef.current = setTimeout(() => {
  toast.dismiss();
}, 5000);

4. 阻止事件冒泡

在 Toast 的交互事件中添加 stopPropagation()，防止事件冒泡导致意外行为：

const handleToastClick = (e) => {
  e.stopPropagation();
  // 其他处理逻辑
};

完整实现示例

import { toast } from "react-toastify";
import { useRef, useState } from "react";

const useToast = () => {
  const exitBtnTimeoutRef = useRef(null);
  const [isToastActive, setIsToastActive] = useState(false);
  const [isCloseToastActive, setisCloseToastActive] = useState(false);

  const showToast = (message) => {
    setIsToastActive(true);
    return toast.loading(message, {
      autoClose: false,
      closeButton: false,
    });
  };

  const updateToast = (id, message, type) => {
    toast.update(id, {
      render: message,
      type,
      isLoading: false,
      autoClose: 5000,
    });
    
    // 设置关闭定时器
    exitBtnTimeoutRef.current = setTimeout(() => {
      toast.dismiss(id);
      setIsToastActive(false);
    }, 5000);
  };

  const dismissToast = (id) => {
    if (exitBtnTimeoutRef.current) {
      clearTimeout(exitBtnTimeoutRef.current);
    }
    toast.dismiss(id);
    setIsToastActive(false);
  };

  return { showToast, updateToast, dismissToast, isToastActive };
};

最佳实践建议

1. 为每个请求创建独立的 Toast 实例：确保每个并发请求都有自己独立的 Toast 标识
2. 合理设置超时时间：根据业务场景设置适当的自动关闭时间
3. 完善错误处理：在 API 请求失败时也要确保 Toast 能够正常关闭
4. 考虑用户体验：在多个请求同时完成时，可以考虑合并通知或使用队列机制

总结

React-Toastify 在并发请求场景下的问题主要源于状态管理和生命周期控制的不完善。通过引入唯一标识、状态管理和定时器机制，可以有效解决 Toast 冲突和无限加载的问题。在实际开发中，开发者应该根据具体业务场景选择最适合的解决方案，并始终将用户体验放在首位。