React useEffect中Socket对象判断异常问题求助

问题重现 #

编译后的React useEffect代码如下：

(0, _react.useEffect)(() => {
    console.log("Outside", socket);
    if (socket !== null && socket !== void 0 && socket.connected) {
      console.log("Inside", socket);
      setNewSocket(socket);
    }
  }, [props]); 

• 浏览器始终只打印Outside，if语句内部代码从未执行，即使socket实际存在。
• 移除&& socket.connected后，if语句执行，但控制台显示socket.connected为false，导致setNewSocket设置的socket无法正常工作。
• 仅直接访问目标页面（如https://myweb.com/tableWithSocket）时出现问题；从首页导航至该页面、触发重渲染（切换设备工具栏/关闭导航栏）时功能恢复正常。

原因分析 #

1. 直接访问时socket连接未就绪：直接打开页面时，组件挂载触发useEffect的时机早于socket完成连接的时机，此时socket.connected为false，导致判断不通过。而浏览器控制台打印的socket是引用类型，会实时更新属性值，你看到的connected: true是后续连接完成后的状态，并非useEffect执行时的真实值。
2. 依赖项触发时机不匹配：useEffect依赖项为[props]，直接访问页面时props未发生变化，useEffect仅执行一次，刚好错过socket连接完成的节点；而导航或重渲染会触发组件重新渲染，useEffect再次执行时，socket已完成连接，connected为true，判断通过。
3. 引用类型的控制台显示误导：socket是引用类型，控制台打印的对象会动态展示最新属性，导致你误以为执行useEffect时connected已经是true，但实际执行判断时该值仍是false。

解决思路 #

• 监听socket连接事件：不要依赖单次状态判断，通过socket的connect事件触发状态更新，确保连接真正建立后才设置socket：

  (0, _react.useEffect)(() => {
    if (socket == null) return;
    console.log("Outside", socket);
    // 已连接直接设置
    if (socket.connected) {
      setNewSocket(socket);
    }
    // 监听连接事件，后续连接完成时触发
    const handleConnect = () => setNewSocket(socket);
    socket.on('connect', handleConnect);
    // 清理监听
    return () => socket.off('connect', handleConnect);
  }, [socket]);
  

• 调整useEffect依赖项：将socket加入依赖数组，确保socket引用变化时重新执行useEffect，获取最新连接状态。如果socket是稳定实例，可结合useRef保存，避免不必要重渲染：

  const socketRef = (0, _react.useRef)(socket);
  (0, _react.useEffect)(() => {
    const currentSocket = socketRef.current;
    if (!currentSocket) return;
    if (currentSocket.connected) {
      setNewSocket(currentSocket);
    }
    const handleConnect = () => setNewSocket(currentSocket);
    currentSocket.on('connect', handleConnect);
    return () => currentSocket.off('connect', handleConnect);
  }, []);
  

• 增加连接等待逻辑：如果socket提供连接的Promise封装，可在useEffect中用async/await等待连接完成后再设置状态：

  (0, _react.useEffect)(async () => {
    if (!socket) return;
    await socket.connectPromise(); // 假设存在该Promise方法
    setNewSocket(socket);
  }, [socket]);
  

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