React中useRef变量值滞后，首次点击selectSession_Click无效

核心问题原因 #

1. refetch异步特性导致值滞后：refetch()是异步操作，调用后不会立刻返回新数据。你在点击事件里直接用result.payload赋值，此时result还是上一次请求的旧数据（甚至首次点击时是初始的undefined），自然会出现值滞后一步的情况。
2. 请求未关联选中的会话ID：你的fetchSeqNums没有接收当前选中的sessionId，导致请求的不是目标会话的序列值，数据本身就不对。
3. 首次点击时无有效数据：首次点击时useQuery从未执行过，result为undefined，直接赋值会失败，后续点击虽有旧数据但依然滞后。

修复方案 #

1. 让请求关联选中的会话ID

修改useQuery的查询键（queryKey），将选中的sessionId加入其中，确保每个会话的请求独立缓存，同时让请求函数能拿到目标会话ID：

const { data: result, isFetching, refetch } = useQuery(
  ['getData', sessionSelected?.SessionId], // 加入sessionId作为查询键的一部分
  ([_, sessionId]) => fetchSeqNums(sessionId), // 传递sessionId给请求函数
  {
    refetchOnWindowFocus: false,
    enabled: !!sessionSelected, // 当有选中会话时自动触发请求
  }
);

2. 监听请求结果更新useRef

用useEffect监听result的变化，只有当新请求完成、result更新后，再同步更新useRef的值：

useEffect(() => {
  if (result?.payload) {
    seqnumRead.current = result.payload.read_seqnum;
    seqnumWrite.current = result.payload.write_seqnum;
  }
}, [result]); // 仅当result变化时执行

3. 简化点击事件逻辑

点击事件只需更新选中的会话，useQuery会根据enabled配置自动触发请求（或手动调用refetch）：

const selectSession_Click = (event, sessionId) => {
  // 用find替代filter，更高效（只需找单个会话）
  const selSession = data?.find(s => s.SessionId === sessionId);
  SetSessionSelected(selSession);
  // 如果保持enabled: false，这里手动调用refetch：
  // refetch();
};

为什么这样能解决问题 #

• 查询键加入sessionId后，useQuery会为每个会话维护独立的缓存，避免数据串用，同时确保请求函数能拿到正确的会话ID。
• useEffect监听result变化，保证只有当新的请求结果返回后，才更新useRef的值，彻底解决异步导致的滞后问题。
• 首次点击时，设置sessionSelected后useQuery自动触发请求，请求完成后result更新，useEffect执行赋值，解决首次无效的问题。

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