React中使用react-use-websocket存储异步WebSocket消息时如何避免消息丢失？

这个问题我之前也碰到过，本质是React状态更新的闭包陷阱导致的，完全不用额外引入队列模块，用React本身的状态更新机制就能轻松解决！

问题原因 #

你当前的代码里，setSocketMessages([...socketMessages, processedResponse])是基于组件渲染时捕获的socketMessages旧状态来更新的。当WebSocket消息快速连续到达时，多个useEffect会被触发，但它们捕获的都是同一个旧的socketMessages数组。这就导致后面的更新会覆盖前面的，最终只有最后一条消息被保留，前面的都丢失了。

最简单的解决方案：使用函数式状态更新 #

React的setState支持传入一个函数，这个函数会接收当前最新的状态作为参数，这样你就可以基于最新状态来更新，完全避开闭包的问题。修改你的代码如下：

import useWebSocket from 'react-use-websocket';
import { useState, useEffect, useCallback } from 'react';

const [socketMessages, setSocketMessages] = useState([]);
const { lastJsonMessage } = useWebSocket(path);

// 用useCallback包裹处理函数，保证依赖稳定，避免不必要的重触发
const receiveHandler = useCallback((lastMessage) => {
  // 这里写你的消息处理逻辑
  return processedLastMessage;
}, []); // 如果处理逻辑依赖其他变量，记得添加到依赖数组里

useEffect(() => {
  // 先判断是否有消息，避免初始渲染时的空值触发无效更新
  if (!lastJsonMessage) return;
  
  const processedResponse = receiveHandler(lastJsonMessage);
  // 使用函数式更新，prevMessages是当前最新的状态快照
  setSocketMessages(prevMessages => [...prevMessages, processedResponse]);
}, [lastJsonMessage, receiveHandler]); // 把lastJsonMessage和receiveHandler加入依赖

这样每次状态更新都会基于最新的prevMessages数组来追加新消息，不管消息多快到达，都能保证所有消息被正确保存，不会丢失。

额外提示 #

• 一定要给useEffect添加正确的依赖项，这里把receiveHandler用useCallback包裹后，就能安全地加入依赖数组，避免组件重渲染时不必要的useEffect触发。
• 如果你的消息处理逻辑不需要复用，也可以直接把receiveHandler的逻辑写在useEffect内部，这样能减少一个依赖项。

备注：内容来源于stack exchange，提问作者Kevin