如何在同一页面的两个useEffect中接收同一个Socket事件？

问题原因 #

你遇到的核心问题是：使用socket.off('event')时未传入对应的回调函数，这会移除该事件名称下的所有监听器。即便两个useEffect都在组件挂载时注册了监听器，只要其中一个的清理函数执行（比如组件卸载时），就会顺带删掉另一个的监听器；部分socket库的实现中，这种写法甚至会导致后续注册的监听器直接失效。

解决方法 #

修改每个useEffect的逻辑，将监听回调定义为局部变量，清理时精准移除当前useEffect注册的回调，而非清除整个事件的所有监听器：

修正后的代码 #

// 第一个 useEffect
useEffect(() => {
  const handleEvent1 = () => {
    console.log('WORK');
  };
  socket.on('event', handleEvent1);

  return () => {
    // 仅移除当前useEffect注册的回调
    socket.off('event', handleEvent1);
  };
}, []);

// 第二个 useEffect
useEffect(() => {
  const handleEvent2 = () => {
    console.log('NOW COMMING HERE');
  };
  socket.on('event', handleEvent2);

  return () => {
    // 仅移除当前useEffect注册的回调
    socket.off('event', handleEvent2);
  };
}, []);

额外注意事项 #

• 确保两个useEffect使用的是同一个socket实例，如果是在组件内部动态创建socket，可能会导致实例不一致，监听器无法触发。
• 若你的socket库（如Socket.io）版本较低，部分API行为可能有差异，建议确认对应库的官方文档中on/off的正确用法。

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