React集成Socket.io报错：TypeError: Cannot read properties of undefined (reading 'apply')

你的错误根源在于事件监听和移除时传递的不是函数引用，而是立即执行的console.log调用结果。

看这段代码：

socket.on('connect', console.log('connected'))
socket.on('disconnect', console.log('disconnected'))

这里console.log('connected')会在代码执行时立刻运行，返回undefined，相当于你给connect事件绑定了一个undefined作为回调。当Socket.io触发connect事件时，内部会尝试调用这个回调的apply方法，自然就会抛出"Cannot read properties of undefined (reading 'apply')"的错误。

同样，在清理函数里的socket.off('connect', console.log('connected1'))也有同样问题，而且就算没有报错，这种写法也无法正确移除事件监听——因为你传递的不是当初绑定的函数引用。

修正方案 #

把回调改成函数形式，并且如果需要移除监听，要复用同一个函数引用：

useEffect(() => {
  // 定义可复用的回调函数
  const onConnect = () => console.log('connected')
  const onDisconnect = () => console.log('disconnected')

  socket.connect()
  socket.on('connect', onConnect)
  socket.on('disconnect', onDisconnect)

  return () => {
    socket.off('connect', onConnect)
    socket.off('disconnect', onDisconnect)
    socket.disconnect()
  }
}, [])

额外说明 #

• Socket.io的on方法第二个参数必须是函数，事件触发时才会调用它；
• 使用socket.off移除监听时，必须传递和on绑定阶段完全相同的函数引用，否则无法正确解绑；
• 你的后端CORS配置、端口匹配逻辑都没问题，修正前端事件绑定后即可正常建立Socket.io连接。

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