Question

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

打开时的行为符合我的预期。因此，消息“连接已打开”被添加到新数组的开头并正确显示。基本上没有变化。

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

控制台日志确认了这一点，输出是数组。

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

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

this post 但它显然没有效果。


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>
    );
}

Answer 1

您应该从以前的状态获取当前消息：

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

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

1 个答案: