ReactJS 中的 WebSocket 使用空数组设置状态

Question

在此先感谢您的任何建议。 我在这里在 ReactJS 中实现 websocket，我的目标是用即将到来的“onmessage”事件填充我的 history 状态。对我来说奇怪的是，setHistory 在收到来自“websocket.onmessage”事件的消息后正在清空我的数组。它甚至消除了我的初始状态。简化版如下：

function NotificationWebSocket ({object_id}) {
const [history, setHistory] = useState([{text: "The first notification"}]) //

    function connectToWebSocket() {
        const wsStart = (window.location.protocol === "https:" ? "wss://" : "ws://")
        const url = 'localhost:8000/live/'
        let socket = new ReconnectingWebSocket(wsStart + url + object_id)
        socket.onmessage = e => {
            console.log(e.data) // logs the received data correctly
            setHistory([...history, {text: e.data}]) // ?? this is setting my history state array to null... ??
            setHistory(history.append({text: e.data})) //also cleans my history array here.
        }
    }

    useEffect(() => {
        connectToWebSocket()
    },[]) // so that we only connect to the websocket once

    return (
        <div>
            We are on a live connection to the server.
            {history.map(item=> <div>{item.text}</div>)}
        </div>
    )
}

注意事项： 我正在使用 ReconnectingWebSocket 库，尽管我尝试不使用它并且发生了同样的事情。 我的 connectToWebSocket 是从 useEffect 内部触发的，否则我会在服务器中收到几个 websockets 请求。

再次感谢， 费利佩。

Answer 1

你可以简单地用下面的代码setHistory(history=> [...history, {text: e.data}])更改setHistory([...history, {text: e.data}])

Answer 2

你有一个陈旧的闭包，这是在使用带有依赖项的钩子时经常犯的一个常见错误（例如useEffect、useMemo、useCallback）。看看here。

解决方案是始终在依赖项列表中的useEffect 回调中包含您要使用的所有变量。在您的情况下，很难发现它们，因为它们中的大多数都隐藏在 connectToWebSocket 函数中，该函数在每次渲染时都会更新，除了... useEffect 调用的函数是在 上创建的函数第一次渲染，onmessage 回调关闭组件在第一次渲染时的状态。

由于您使用的是WebSocket，因此每次history 更改时仅useEffect 是不够的，因为您将有多个连接（每次更改一个），您还需要在下一个效果时断开连接被调用，您可以通过从与 WebSocket 断开连接的useEffect 回调中返回一个函数来执行此操作，以便效果可以再次连接。这也是 React 文档中在概念上解释的示例，当时显示了一个关于 useEffect 的 example。

通常建议避免这种情况的方法是

1. 在回调内部而不是在回调外部定义您要在 useEffect 回调中调用的函数；
2. 使用您最喜欢的 linter 警告您在 useEffect（或类似的）调用中缺少依赖项。如果您尝试create-react-app，这已经为您配置好了。

另外，正如@ako-javakhishvili 建议的那样，每当您的下一个状态取决于状态本身的先前值时，请使用回调而不是立即值调用 setter 函数。在这种情况下，这将解决您的问题，但您仍然会有一个陈旧的闭包，您也应该注意这一点。