ReactJS项目中SignalR的On方法仅页面刷新后才生效如何解决

你代码的核心问题是将connection连接实例声明为componentDidMount的局部变量，该生命周期函数执行完毕后实例会丢失引用，后续服务端推送事件触发时找不到绑定的回调，只有页面刷新重新执行挂载逻辑新建连接才能临时生效。另外缺少连接销毁、异常捕获逻辑也会提升事件绑定失效的概率。

1. 核心调整：将连接实例挂载到组件实例上 #

把connection存到组件this对象下，保证组件全生命周期内实例不丢失，同时增加判断避免重复创建连接。

2. 补充组件卸载销毁逻辑 #

避免内存泄漏和多连接实例冲突。

3. 增加连接异常捕获 #

方便快速排查连接失败导致的事件不触发问题。

修复后的完整代码如下：

import Cookies from 'js-cookie'
import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr'

// ...其他组件逻辑

componentDidMount() {    
    // 避免重复创建连接
    if (!this.signalRConnection) {
      this.signalRConnection = new HubConnectionBuilder()
        .withUrl('http://test.com/hub', { 
          accessTokenFactory: () => Cookies.get('access_token') 
        })
        .configureLogging(LogLevel.Debug)
        .withAutomaticReconnect([0, 0, 2000])
        .build();

      // 事件绑定必须在start之前完成，避免刚连接就收到的事件漏处理
      this.signalRConnection.on('MessageCount', () => someMethod());
      this.signalRConnection.on('Dialog', () => someMethod());
      this.signalRConnection.on('Send', () => someMethod());

      this.signalRConnection.start()
        .then(() => console.log('Connected'))
        .catch(err => console.error('SignalR连接失败: ', err));
    }
}

// 组件卸载时主动销毁连接
componentWillUnmount() {
  if (this.signalRConnection) {
    this.signalRConnection.stop();
    this.signalRConnection = null;
  }
}

• 如果你后续重构为函数组件，连接实例要存到useRef中，不要存在useState里，避免触发不必要的重渲染
• 确认服务端推送的事件名称、参数和前端绑定的完全一致，SignalR事件名称大小写敏感
• 如果是路由跳转场景下失效，可在生命周期中加日志确认组件没有被重复挂载/卸载

内容的提问来源于stack exchange，提问作者Батрадз Санакоев