为什么我的套接字值从 Context Api 接收时始终为 null

Question

这是我的 main.jsx 文件（index.js）

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import router from "./routes/index.jsx";
import { SocketProvider } from "./context/SocketContext.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<RouterProvider router={router}>
    <SocketProvider>
        <App />
    </SocketProvider>
</RouterProvider>
);

这是我的 App.jsx 文件

import React, { useEffect, useState, useContext } from "react";
import { Outlet } from "react-router-dom";
import { Toaster } from "react-hot-toast";

const App = () => {
    return (
        <div>
            <Toaster></Toaster>
            <Outlet></Outlet>
        </div>
    );
};

export default App;

这是我的 SocketContext 文件

import React, { createContext, useState, useEffect } from "react";
import { io } from "socket.io-client";

const SocketContext = createContext(null);

export const SocketProvider = ({ children }) => {
    const [socket, setSocket] = useState(null);

    useEffect(() => {
        const socketInstance = io("http://localhost:4000");
        console.log("socket connected", socketInstance);
        setSocket(socketInstance);

        return () => {
            socketInstance.disconnect();
        };
    }, []);

    return (
        <SocketContext.Provider value={socket}>
            {children}
        </SocketContext.Provider>
    );
};

export default SocketContext;

这是我正在使用上下文的 Homepage.jsx 文件

import "./Homepage.css";
import React, { useState, useEffect, useContext } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import getRandomUsername from "../../helpers/getRandomUsername";
import SocketContext from "../../context/SocketContext.jsx";
const Homepage = () => {
    const navigate = useNavigate();
    const [username, setUsername] = useState("");
    const [room, setRoom] = useState("");
    console.log(SocketContext);
    const socket = useContext(SocketContext);
    console.log("SocketConnection", socket);

    return (
        <div className="homepage">
            {Further data}
        </div>
    );
};

export default Homepage;

即使 SocketContext 中的 console.log() 也没有打印任何内容，我认为服务器上甚至没有发出任何请求，因为我的服务器也没有按照预期在客户端连接上打印任何内容。

我该如何解决这个问题，可能的原因是什么

Answer 1

您在配置后忘记连接套接字。你可以这样做。

socket.on('connect', () => {
        console.log('Connected to the server');
        setSocket(socket);
    });

这样您的服务器将连接并且实例将被保存到您的 State 变量中。