React初始化TelloSocketClient客户端导致页面白屏问题求助

我正在使用React和TypeScript结合socket.io-client构建Tello无人机控制界面。当初始化封装了Socket连接的TelloSocketClient类时，浏览器显示空白白屏；但跳过该客户端初始化时，Connect和ControlPanel页面可正常渲染。

代码结构 #

1. App.tsx（管理连接状态的根组件） #

// ... imports ...
function App() {
    const [isConnected, setIsConnected] = useState(false);

    const telloClient = new TelloSocketClient("http://localhost:5001", ["websocket"]);

    return (
        <>
            {isConnected ? (
                <ControlPanel tello={telloClient}/>
            ) : (
                <Connect onConnect={() => {
                    telloClient.connect();
                    setIsConnected(telloClient.socket.connected)
                }}/>
            )
            }
        </>
    )
}

2. TelloSocketClient.ts（Socket客户端类） #

import {io, Socket} from "socket.io-client";
import winstonLogger from "@/services/Logger.ts";

const logger = winstonLogger({logName: "TelloSocketClient", level: "debug"});

interface ServerToClientEvents {
    noArg: () => void;
    basicEmit: (a: number, b: string, c: Buffer) => void;
    withAck: (d: string, callback: (e: number) => void) => void;
    connection_status: (payload: string) => void;
    move_status: (payload: string) => void;
    rotate_status: (payload: string) => void;
    flip_status: (payload: string) => void;
    state_update: (payload: string) => void;
}

interface ClientToServerEvents {
    hello: () => void;
}

interface ServerMessage {
    status: string;
    message: string;
}

type Transport = "polling" | "websocket" | "webtransport";
type ValidMoves = "up" | "down" | "left" | "right" | "forward" | "back";
type ValidRotations = "cw" | "ccw";
type ValidFlips = "left" | "right" | "forward" | "backward";

class TelloSocketClient {
    readonly socket: Socket<ServerToClientEvents, ClientToServerEvents>;

    constructor(domain: string, transport: Transport[]) {
        this.socket = io(domain, {
            autoConnect: false,
            transports: transport,
            reconnection: true,
            withCredentials: true,
            timeout: 5000,
        });
    }

    @logMethodOperations
    public connect() {
        this.socket.connect();
    }

    @logMethodOperations
    public disconnect() {
        this.socket.disconnect();
    }

    @logMethodOperations
    public move(direction: ValidMoves) {
        this.socket.send("move", direction);
    }

    // Other methods

    private registerEventHandler(event: keyof ServerToClientEvents, callback?: (message: ServerMessage) => void) {
        this.socket.on(event, (payload: string) => {
            const message = this.parseMessageFromServer(payload);
            logger.info(`Received message from ${event}: ${JSON.stringify(message)}`);

            if (message.status === "error") {
                logger.error(`Error: ${message.message}`);
            } else {
                logger.info(`Success: ${message.message}`);
            }

            if (callback) {
                callback(message);
            }
        });
    }

   // Other methods
}

function logMethodOperations(originalMethod: any, context: ClassMethodDecoratorContext) {
    const methodName = String(context.name);

    function wrapper(this: any, ...args: any[]) {
        logger.info(`Entering method '${methodName}'.`);
        const result = originalMethod.call(this, ...args);
        logger.info(`Exiting method '${methodName}'.`);
        return result;
    }

    return wrapper;
}

export default TelloSocketClient;

预期行为 #

• 页面加载时应显示Connect Page和控制界面；点击Connect组件中的“Connect”按钮后，应用切换到ControlPanel并与无人机建立实时连接。

实际行为 #

• 即使未调用connect()，初始化TelloSocketClient也会导致浏览器显示空白白屏，控制台无错误输出；若不初始化客户端，页面可正常工作。

已尝试方案 #

• 延迟初始化：仅在用户交互（如点击按钮）后创建客户端实例。

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