reactjs - 使用 WebSocket 反应 useState 导致数组无法正确更新

问题描述

您好，我正在尝试将 WebSockets 与 react 和（如果重要，电子）一起使用

打开的行为如我所料。因此，“连接已打开”消息被添加到新数组的开头并正确显示。基本上是不换档的。

然而，OnMessage 的行为很奇怪。它只是覆盖数组的第一个元素。即使调用了相同的“addMessage”函数。

控制台日志通过输出为数组来确认这一点。

这可能是什么原因造成的？

我尝试将 on 消息分配放入不同的 useEffect 挂钩中，例如

这个帖子，但它显然没有效果。


const DebugScreen: FunctionComponent = () => {
    const [messages, setMessages] = useState<Array<string>>([]);
    const socket = useRef<WebSocket>();

    useEffect(() => {
        openConnection();
        return () => {
            if (socket.current) {
                socket.current.close();
            }
        }
    }, []);


    const openConnection = () => {
        socket.current = new WebSocket('wss://localhost');

        if (!socket.current) return;

        socket.current.onopen = () => addMessage('Connection opened');
        socket.current.onmessage = ({ data }) => addMessage(data.toString());
        socket.current.onerror= err => console.log(err);
    }

    const addMessage = (message: string) => {
        setMessages([message, ...messages]);

    };

    const sendWebsocketMessage = () {
        if (!socket.current) return;
        console.log('sendWebsocketMessage: ' + messages);
        socket.current.send(
            JSON.stringify({
                test: 'data'
                },
            })
        );
    }
    const logMessages = () => console.log(messages);

    return (
        <div>
            
            {/* Display server responses */}
            {messages.map((message) => <p key={Math.random().toString()}>{message}</p>)}

            {/* 1) Connect to Cortex Socket */}
            <button onClick={openConnection} >1) Open Cortex Connection</button>

            {/* 2) Sent WebSocket message */}
            <button onClick={sendWebsocketMessage}>Request Cortex Access</button>
            
            <button onClick={logMessages}>Log Messages</button>
        </div>
    );
}

标签： reactjstypescriptwebsocketelectronreact-hooks

reactjs - 使用 WebSocket 反应 useState 导致数组无法正确更新

问题描述

解决方案

推荐阅读