React Native WebSocket首次进入聊天页未连接 热重载才连接如何解决？

问题成因 #

1. 连接地址依赖的logID初始化时机晚于WebSocket实例创建：你代码中getID大概率是异步获取用户/会话ID的逻辑，首次组件渲染时，顶层声明的WebSocket实例创建时logID还未完成赋值，导致请求地址非法，连接直接失败。热重载时页面状态不会重置，logID已经有有效值，此时重新创建的实例用了正确的地址，所以能连接成功。
2. 实例创建时机错误：WebSocket实例在创建时就会自动发起连接请求，如果你把实例创建逻辑放在无依赖的useEffect里，执行顺序依然早于getID异步逻辑的返回时机，还是会拿到无效的logID，无法解决问题。
3. 缺少实例状态保活：未用ref存储WebSocket实例，组件重渲染时可能出现实例丢失、事件绑定失效的问题。

修复方案 #

调整逻辑顺序，确保logID初始化完成后再创建WebSocket连接，用useRef保存实例，依赖logID触发连接逻辑，参考代码如下：

// 先声明logID状态和client存储ref
const [logID, setLogID] = useState(null);
const clientRef = useRef(null);
const [messages, setMessages] = useState([]);

// 单独的getID异步逻辑，完成后更新logID
const getID = async () => {
  // 你的原有获取logID的逻辑
  const res = await fetch('/api/get-log-id');
  const id = await res.json();
  setLogID(id);
}

useEffect(() => {
  // 页面初始化先执行基础逻辑
  getID();
  getPrevMsgs();
  scrollHandler();
}, []);

// 监听logID变化，准备就绪后创建连接
useEffect(() => {
  // logID为空时不执行连接逻辑
  if (!logID) return;

  // 创建新连接前先关闭旧连接，避免重复连接
  if (clientRef.current) {
    clientRef.current.close();
  }

  // 用有效logID创建实例
  const client = new W3CWebSocket(
    `url/api/ws/chat/1/${logID}/`,
  );
  clientRef.current = client;

  client.onopen = (e) => {
    console.log('WebSocket Client Connected');
  };

  client.onmessage = message => {
    const dataFromServer = JSON.parse(message.data);
    console.log('got reply! ', dataFromServer);
    if (dataFromServer) {
      setMessages(messages => [
        ...messages,
        {msg: dataFromServer.type, sender: dataFromServer.sender},
      ]);
    }
  };

  // 组件卸载或logID变更时清理连接
  return () => {
    if (clientRef.current) {
      clientRef.current.close();
      clientRef.current = null;
    }
    getPrevMsgs();
    scrollHandler();
  };
}, [logID]);

调整后只要logID完成赋值就会自动触发连接逻辑，首次进入页面就能正常连接。

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