React useState with WebSocket导致数组不能正确更新

Question

你好，我正在尝试使用WebSockets与react和(电子如果它重要)

On open的行为和我期望的一样。因此消息"Connection opened"被添加到一个新数组的开始并正确显示。基本上是unshift。

然而，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>
);
}

Answer 1

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

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