reactjs - 与WebSocket react useState导致数组无法正确更新

Question

您好，我正在尝试将WebSockets与react和(如果重要的话，请使用 Electron )一起使用
打开时的行为符合我的预期。因此，“连接已打开”消息被添加到新阵列的开始并正确显示。基本上是一成不变的。
但是，OnMessage的行为异常。它只是覆盖数组的第一个元素。即使正在调用相同的“addMessage”函数。
控制台日志以输出为阵列的方式确认这一点。
是什么原因造成的？
我尝试将on消息分配放入不同的useEffect Hook 中，例如
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]);
  };