React组件如何通过API增量更新？Next.js/TS场景问题排查

问题分析与修复方案 #

1. 组件无法触发重渲染的问题 #

你直接修改全局数组packets后，将同一个数组引用传给setPacketsToRender。React的状态更新依赖引用变化触发重渲染，而引用类型的同一个值不会被识别为状态变更，导致组件无法更新。

修复：
抛弃全局数组，基于组件内部状态创建新数组。将全局的packets替换为组件内部的useState，latestPacketId用useRef存储（无需触发重渲染）。

2. API请求重复发送的问题 #

• Next.js开发环境的Strict Mode会重复执行useEffect回调，导致初始请求发送两次；
• 递归setTimeout未添加清理机制，组件卸载后可能继续发起请求，且若请求耗时超过轮询间隔，会引发并发请求堆积。

修复：

• 在useEffect中返回清理函数，清除定时器；
• 用useRef标记当前是否有请求在进行，避免并发请求；
• 清理机制可避免Strict Mode下的重复轮询。

3. setTimeout轮询的最佳实践 #

递归setTimeout是可行的方案，相比setInterval，它能保证上一次请求完成后再发起下一次，避免请求堆积。只要做好清理机制和并发控制，就符合最佳实践。

核心要点：

• 每次请求完成后再设置下一次定时器；
• 组件卸载时必须清理定时器；
• 添加请求状态标记，防止同时发起多个请求。

4. 全局变量的TypeScript最佳实践 #

全局变量packets和latestPacketId不符合规范：

• 全局变量会被多个组件实例共享，导致状态混乱；
• 无法被React状态管理机制追踪，易引发不可预测问题；
• TypeScript应优先使用组件内部状态或useRef，避免不必要的全局变量。

修复：

• 用useState存储需要触发重渲染的消息列表；
• 用useRef存储无需触发重渲染的最新消息ID和请求状态标记。

完整修正代码 #

import { useState, useEffect, useRef } from 'react';
import styles from './CommsPacketList.module.css';
import MessagePacket from './MessagePacket';

interface PacketSummary {
  packet_index: number;
  // 补充你的其他字段定义
}

const API_ENDPOINT__COMMS_PACKET_LIST = '/api/comms-packets'; // 替换为实际API地址

function CommsPacketList() {
  const [packetsToRender, setPacketsToRender] = useState<PacketSummary[]>([]);
  const [fetchError, setFetchError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const latestPacketIdRef = useRef<number>(-1);
  const isFetchingRef = useRef<boolean>(false);
  const timerRef = useRef<NodeJS.Timeout | null>(null);

  const fetchNewItems = async () => {
    // 避免并发请求
    if (isFetchingRef.current) return;
    isFetchingRef.current = true;

    try {
      const url = `${API_ENDPOINT__COMMS_PACKET_LIST}?limit=100&offset_index=${latestPacketIdRef.current}`;
      const response = await fetch(url);
      if (!response.ok) throw new Error(`请求失败：${response.status}`);
      const newPackets: PacketSummary[] = await response.json();

      if (newPackets.length > 0) {
        // 创建新数组触发重渲染
        setPacketsToRender(prev => [...prev, ...newPackets]);
        // 更新最新消息ID
        latestPacketIdRef.current = newPackets[newPackets.length - 1].packet_index;
      }
      setFetchError(null);
    } catch (error: any) {
      setFetchError(error.message);
    } finally {
      setIsLoading(false);
      isFetchingRef.current = false;
      // 设置下一次轮询
      timerRef.current = setTimeout(fetchNewItems, 5000);
    }
  };

  useEffect(() => {
    // 初始加载数据
    fetchNewItems();

    // 组件卸载时清理定时器
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  if (fetchError) return <div>加载失败：{fetchError}</div>;
  if (isLoading && packetsToRender.length === 0) return <div>加载中...</div>;
  if (packetsToRender.length === 0) return <div>暂无消息！</div>;

  return (
    <div className={styles.comms_packet_listing}>
      {packetsToRender.map((packetSummary) => (
        <MessagePacket
          key={packetSummary.packet_index} // 添加唯一key，消除React警告
          packetSummary={packetSummary}
        />
      ))}
    </div>
  );
}

export default CommsPacketList;

额外说明 #

• 关于useSWR的0.1秒更新频率：useSWR的refreshInterval最小支持100ms，但高频轮询建议用WebSocket替代，更高效且减少服务器压力；
• 代码中为列表项添加了key属性，符合React列表渲染最佳实践；
• 增加了HTTP响应状态检查，避免解析错误响应内容；
• 用useRef管理请求状态和定时器，避免不必要的重渲染。

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