React中如何检查Pusher事件是否已绑定？解决重复绑定重复通知问题

方案一：利用useEffect清理函数解绑（推荐） #

这是React处理订阅类逻辑的标准方式，组件卸载或依赖更新时自动移除绑定，从根源避免重复绑定：

import { useEffect } from 'react';

// ... 组件内部
useEffect(() => {
  // 把事件处理函数单独抽出来，方便后续精准解绑
  const handleFileProcessFailed = (data: any) => {
    if (data.message.indexOf('failed') > -1) {
      showNotification('warning', 'Your file has failed processing. Please upload it again.');
      setShowProcessing(false);
      setProcessingCategory('');
      setShowError(true);
    }
  };

  // 绑定事件
  channel.bind(userData.userId, handleFileProcessFailed);

  // 清理函数：组件卸载/依赖变化时执行，移除绑定
  return () => {
    channel.unbind(userData.userId, handleFileProcessFailed);
  };
}, [channel, userData.userId, showNotification, setShowProcessing, setProcessingCategory, setShowError]);

注意：要把所有用到的外部依赖（比如状态更新函数、showNotification）都加到useEffect的依赖数组里，确保逻辑正确触发。

方案二：检查是否已绑定事件（不推荐，存在兼容性风险） #

Pusher的Channel对象自带bindings属性，可以查看已绑定的事件列表，判断是否已经绑定过目标事件：

useEffect(() => {
  const handleFileProcessFailed = (data: any) => {
    if (data.message.indexOf('failed') > -1) {
      showNotification('warning', 'Your file has failed processing. Please upload it again.');
      setShowProcessing(false);
      setProcessingCategory('');
      setShowError(true);
    }
  };

  // 检查当前事件是否已绑定
  const isBound = channel.bindings[userData.userId]?.some(binding => 
    binding.callback.toString() === handleFileProcessFailed.toString()
  );

  if (!isBound) {
    channel.bind(userData.userId, handleFileProcessFailed);
  }

  // 同样需要清理函数
  return () => {
    channel.unbind(userData.userId, handleFileProcessFailed);
  };
}, [channel, userData.userId, showNotification, setShowProcessing, setProcessingCategory, setShowError]);

⚠️ 注意：函数的toString()结果可能在生产环境（比如代码压缩后）发生变化，导致判断失效，所以优先用方案一。

额外注意点 #

确保你的channel是同一个实例，不要每次组件挂载都重新创建Pusher Channel。可以把Channel实例放在组件外部，或者用useMemo缓存，避免重复实例化导致的绑定失效或重复绑定。

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