React函数组件中State始终不更新问题（WebRTC心跳场景）

你遇到的核心问题是：WebRTC连接的消息监听回调绑定的是旧版本的ProcessMessage函数。

当competitors更新时，useCallback会生成新的ProcessMessage实例，但WebRTC的连接（conn）依然持有初始渲染时绑定的旧ProcessMessage——这个旧函数捕获的是初始状态的competitors = []，所以每次处理心跳时，读到的都是空数组。

用useRef保存ProcessMessage的最新引用，让WebRTC连接始终调用最新版本的函数：

1. 引入useRef并创建保存函数的引用容器：

import React, { useCallback, useEffect, useState, useRef } from 'react';

function App() {
  // ... 原有state定义
  const processMessageRef = useRef(null);

2. 同步最新的ProcessMessage到ref：

const ProcessMessage = useCallback((data) => {
  // 你的原有逻辑保持不变
}, [boardData, competitors]);

// 每次ProcessMessage更新时，同步到ref
useEffect(() => {
  processMessageRef.current = ProcessMessage;
}, [ProcessMessage]);

3. 修改WebRTC连接的消息监听逻辑，通过ref调用最新函数：
   把原本的conn.on('data', ProcessMessage)替换为：

conn.on('data', (data) => {
  processMessageRef.current?.(data);
});

这样不管ProcessMessage因依赖更新多少次，WebRTC触发的都是最新版本的函数，里面的competitors就是当前最新的state值。

• 确保WebRTC连接的创建逻辑无需因processMessageRef更新而重新执行，通过ref间接调用的方式不需要重新绑定监听。
• 检查其他可能缓存ProcessMessage引用的地方（比如定时器、其他回调），统一改成通过ref调用最新函数。

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