React中如何将WebSocket数据追加至State而非覆盖原有数据

首先，把chartData的初始状态从null改成空数组，因为我们要存储一系列时序数据：

const [chartData, setChartData] = React.useState([]);

然后，更新状态时不能直接传入新值，得用函数式更新基于旧状态追加新数据——这样能保证每次拿到最新的历史数据，不会覆盖：

// 父组件中传给Socket的dataFunction
const handleNewData = (decodedData) => {
  setChartData(prevData => [...prevData, decodedData]);
};

另外，你的Socket组件存在重复连接的问题：每次组件渲染都会创建新的WebSocket实例，会导致冗余连接和内存泄漏。需要把WebSocket初始化放到useEffect里，并在组件卸载时关闭连接：

const Socket = ({ url, protocol, dataFunction }) => {
  React.useEffect(() => {
    const ws = new WebSocket(url); // 注意拼写是WebSocket，不是Websocket
    
    ws.onmessage = function onMessage(msg) {
      if (protocol === 'JSON') { // 这里要判断字符串'JSON'，而非全局JSON对象
        const decoded = JSON.parse(msg.data);
        dataFunction(decoded);
      }
    };

    // 组件卸载时关闭连接，避免内存泄漏
    return () => {
      ws.close();
    };
  }, [url, protocol, dataFunction]); // 依赖项变化时重新创建连接

  return null; // Socket组件无需渲染DOM内容
};

如果后续时序数据量过大，建议做数据裁剪（比如只保留最近100条），避免状态体积过大影响性能。

内容的提问来源于stack exchange，提问作者jm22b