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

Question

目标：

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

问题：

仅当调用outgoingMessages时，最新消息才保存在receive()中。

我怀疑发生这种情况，因为从我调用Websocket.onmessage开始，outgoingMessages仅使用connect()的值。我已经尝试了很多，但是还不能解决这个问题。

如何获得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.s。 -简要说明-您的状态处理outgoingMessages，但您确实为传入消息in设置了接收状态。因此，请检查一下...