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

【问题标题】：Can't update state when using `setFoo` as a callback for websocket `onmessage` event使用`setFoo`作为websocket`onmessage`事件的回调时无法更新状态
【发布时间】：2020-08-31 19:13:47
【问题描述】：

目标：

我正在尝试通过 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</>)
}

【问题讨论】：

标签： reactjs websocket closures react-hooks react-state-management

【解决方案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</>)
}

附言-- 只是一个简短的说明- 您的状态处理outgoingMessages，但您确实为incomingMessagesinreceive 设置了状态。所以检查一下...

【讨论】：

一个小问题：connect 是如何被调用的？