使用 `setFoo` 作为 websocket `onmessage` 事件的回调时无法更新状态

Question

目标：

我正在尝试通过 websocket 连接从服务器获取消息并将它们添加到名为 outgoingMessages 的对象数组中。

问题：

调用 receive() 时，只有最新消息保存在 outgoingMessages 中。

我怀疑发生这种情况是因为 Websocket.onmessage 只使用了我调用 connect() 时的 outgoingMessages 的值。我试过很多次摆弄它，但我没能解决这个问题。

如何让 receive() 使用当前状态，而不是初始状态？

提前致谢。

const Dashboard = () => {
  const [incomingMessages, setIncomingMessages] = React.useState([]);
  const ws = React.useRef(null);

  const receive = (message) => {
    setIncomingMessages([...incomingMessages, message]);
  };

  const connect = () => {
    ws.current = new WebSocket(WS_URL + "mqtt/ws/messages");
    ws.current.onopen = () => setWsConnected(true);
    ws.current.onclose = () => setWsConnected(false);
    ws.current.onmessage = (event) => receive(event);
  };

  return (<>Stuff</>)
}

Answer 1

看起来 connect 函数在初始渲染中被调用一次，而在 receive 函数中，incomingMessages 值总是从 closure 中获得，因此你只能看到最新消息。

要设置状态，请使用功能设置状态模式，即提供对 setIncomingMessages 的回调。

像这样

const Dashboard = () => {
  const [outgoingMessages, setOutgoingMessages] = React.useState([]);
  const ws = React.useRef(null);

  const receive = (message) => {
    setIncomingMessages(prev => [...prev, message]);
  };

  const connect = () => {
    ws.current = new WebSocket(WS_URL + "mqtt/ws/messages");
    ws.current.onopen = () => setWsConnected(true);
    ws.current.onclose = () => setWsConnected(false);
    ws.current.onmessage = (event) => receive(event);
  };

  return (<>Stuff</>)
}

p.s。 -- 只是一个简短的说明 - 你的状态处理 outgoingMessages 但你确实为 incomingMessagesinreceive` 乐趣设置了状态。所以检查一下...

使用 `setFoo` 作为 websocket `onmessage` 事件的回调时无法更新状态

Can't update state when using `setFoo` as a callback for websocket `onmessage` event

reactjs

websocket

closures

react-hooks

react-state-management