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

【问题标题】：React useState with WebSocket causes array to not update correctly使用 WebSocket 反应 useState 导致数组无法正确更新
【发布时间】：2021-05-02 13:53:35
【问题描述】：

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

打开时的行为与我预期的一样。因此，“连接已打开”消息被添加到新数组的开头并正确显示。基本上是unshift。

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

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

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

我尝试将 on 消息分配放入不同的 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>
    );
}

【问题讨论】：

标签： reactjs typescript websocket electron react-hooks

【解决方案1】：

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

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

【讨论】：

非常感谢。我不知道我是怎么错过的。