如何通过useEffect钩子调用WebSocket函数？依赖项参数报错咨询

你的代码存在两个核心问题：

1. useEffect依赖user导致重复创建WebSocket连接：每次user状态更新都会触发useEffect执行connect，这会不断生成新的WebSocket连接，造成资源浪费甚至连接异常。
2. user状态的类型与更新逻辑不合理：你将user初始化为数组[{connected: false}]，但单用户连接状态用对象更贴合场景；若更新时未生成新的引用，React的浅比较会判定状态未变化，无法触发UI更新。

修正步骤 #

1. 调整WebSocket连接的触发时机 #

WebSocket连接通常只需初始化一次，或在未连接时重试，无需每次user更新都重建。连接成功后更新user状态即可同步UI。

修改后的完整代码：

import { useState, useEffect } from 'react';
import SockJS from 'sockjs-client';
import { over } from 'stompjs';

let stompClient = null;

function YourComponent() {
  // 将user改为对象类型，适配单用户场景
  const [user, setUser] = useState({ connected: false });

  const connect = () => {
    // 避免重复建立连接
    if (stompClient?.connected) return;
    console.log("going to connect");
    
    const sock = new SockJS('http://localhost:9081/gs-guide-websocket');
    stompClient = over(sock);

    // 连接成功回调：更新user的连接状态
    const onConnected = () => {
      console.log("connect successful");
      setUser(prev => ({ ...prev, connected: true }));
    };

    // 连接失败回调：更新错误状态
    const onError = (error) => {
      console.error("Connection error:", error);
      setUser(prev => ({ ...prev, connected: false }));
    };

    stompClient.connect({}, onConnected, onError);
  };

  // 组件挂载时初始化连接，仅执行一次
  useEffect(() => {
    connect();
    // 组件卸载时断开连接，防止内存泄漏
    return () => {
      if (stompClient) {
        stompClient.disconnect();
      }
    };
  }, []); // 空依赖数组：仅在组件挂载/卸载时触发

  // 单独监听user状态变化，处理UI更新逻辑
  useEffect(() => {
    console.log("User state updated:", user);
    // 此处编写UI更新相关代码
  }, [user]);

  return (
    <div>
      <p>Connection Status: {user.connected ? "Connected" : "Disconnected"}</p>
    </div>
  );
}

export default YourComponent;

2. 优化状态更新逻辑 #

• 将user从数组改为对象，更符合单用户连接状态的业务逻辑；
• 使用函数式更新setUser(prev => ({ ...prev, connected: true }))，确保基于最新状态更新，避免闭包陷阱；
• 添加组件卸载时的清理函数，主动断开WebSocket连接，避免内存泄漏。

3. 解决useEffect依赖错误 #

若需在user变化时执行操作但无需重连WebSocket，拆分两个useEffect即可：一个负责初始化连接（空依赖），另一个监听user变化（依赖user），既避免依赖错误，也不会重复建立连接。

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