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

Question

目标：

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

问题：

调用outgoingMessages时仅保存最新消息。receive()

我怀疑会发生这种情况，因为仅使用我致电时Websocket.onmessage的值。我已经尝试摆弄它很多次，但我无法解决这个问题。outgoingMessagesconnect()

我怎样才能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</>)
}

ps - 只是一个简短的说明 - 您的状态处理outgoingMessages但您确实为传入消息接收乐趣设置状态in。所以检查一下...