javascript - 将套接字变量分配给 React Hook State 并作为 Context 传递

Question

我有一个让我发疯的问题

我正在构建以下 React App 原型，它非常简单：

如果用户未登录，他将被重定向到登录页面，否则他将被重定向到AuthApp，问题就来了。

在这一点上，我想：

• 挂载 AuthApp 组件时初始化与服务器的套接字连接；
• 卸载 AuthApp 组件时关闭连接

注意： socket 变量必须被所有 AuthApp 子组件使用，所以我决定使用 useContext 钩子

我的代码如下：

SocketContext.js

import React from "react";

const SocketContext = React.createContext(null);
export default SocketContext;

/* at first SocketContext will be null, it will be initialized only if user logs in*/

验证.js：

import React, { Component,useEffect,useContext,useState } from 'react';
import SocketContext from '../SocketContext';
import socketClient from "socket.io-client";
import MyChildComponent from './MyChildComponent';
const SERVER = 'http://localhost:8080';

const AuthApp = (props)=>{
  useEffect(()=>{
    //SOCKET WILL BE INITIALIZED HERE 
    var s = socketClient(SERVER);
    setSocket(socket)

   //WHEN COMPONENT UNMNOUNT, SOCKET WILL DISCONNECT
    return(()=>s.disconnect())
  },[])
  const [socket,setSocket] = useState(null);
  return(
    <SocketContext.Provider value={socket}>
      <MyChildComponent /> {/*socket is null */}
    </SocketContext.Provider>
  )
}

问题是在 MyChildComponent 中 socket 的值为NULL。

现在，我知道我的代码根本不正确，但我需要找到解决方案来实现以下行为：

标签： javascripthtmlreactjssockets