React+Rails应用未知总数记录的分批/逐条渲染方案咨询

要实现逐条/分批加载并即时渲染的效果，需要后端支持分页查询（通过offset和limit参数），同时前端循环/递归请求批次数据，累加并更新状态。以下是具体实现：

1. Ruby on Rails 后端修改 #

首先修改接口，支持接收offset（偏移量）和limit（批次大小）参数，同时返回当前批次数据和是否还有更多记录的标识：

# app/controllers/api/v1/record_card_controller.rb
def other_records
  record_card = RecordCard.find(params[:record_id])
  batch_size = params[:limit].to_i.presence || 5 # 默认每批5条，可按需调整
  current_offset = params[:offset].to_i.presence || 0

  # 查询当前批次记录
  records = record_card.other_records.offset(current_offset).limit(batch_size)
  # 判断是否还有更多记录
  total_count = record_card.other_records.count
  has_more = current_offset + batch_size < total_count

  render json: {
    other_records: records,
    has_more: has_more
  }
end

2. React 前端修改 #

2.1 更新 API 网关方法 #

修改recordGateway的getRecords方法，新增offset和limit参数，适配后端返回的has_more字段：

// recordGateway.ts
getRecords = (recordId: number, offset: number, limit: number) =>
  this.axios.get<{ other_records: OtherRecord[], has_more: boolean }>(
    `/api/v1/record_card/${recordId}/other_records`,
    { params: { offset, limit } }
  )

2.2 组件逻辑改造 #

调整组件状态，增加偏移量、是否还有更多记录的状态，通过递归+可选延迟实现分批加载，每次获取到批次数据后立即累加渲染：

import { useState, useEffect } from 'react';

const YourComponent = ({ recordId }: { recordId: number }) => {
  const [otherRecords, setOtherRecords] = useState<OtherRecord[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [hasError, setHasError] = useState(false);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const BATCH_SIZE = 5; // 改为1可实现逐条加载
  const LOAD_DELAY = 500; // 可选：批次加载间隔，强化逐步加载效果

  useEffect(() => {
    let timeoutId: NodeJS.Timeout;
    const controller = new AbortController();
    const signal = controller.signal;

    // 单批次请求逻辑
    const fetchBatch = async () => {
      if (!hasMore || isLoading) return;
      setIsLoading(true);

      try {
        const res = await recordGateway.getRecords(recordId, offset, BATCH_SIZE, signal);
        // 累加新记录，触发即时渲染
        setOtherRecords(prev => [...prev, ...res.data.other_records]);
        setHasMore(res.data.has_more);
        setOffset(prev => prev + BATCH_SIZE);
      } catch (err) {
        // 排除请求被主动取消的情况
        if (!(err instanceof Error || (err as any).name === 'CanceledError')) {
          setHasError(true);
        }
      } finally {
        setIsLoading(false);
      }
    };

    // 递归加载下一批
    const loadNextBatch = async () => {
      await fetchBatch();
      if (hasMore) {
        timeoutId = setTimeout(loadNextBatch, LOAD_DELAY);
      }
    };

    loadNextBatch();

    // 组件卸载时清理请求和定时器
    return () => {
      controller.abort();
      clearTimeout(timeoutId);
    };
  }, [recordId, offset, hasMore]);

  // 渲染逻辑
  return (
    <div>
      {hasError && <div>加载出错</div>}
      {isLoading && <div>加载中...</div>}
      <ul>
        {otherRecords.map(record => (
          <li key={record.id}>{record.name}</li> {/* 根据实际字段调整渲染内容 */}
        ))}
      </ul>
    </div>
  );
};

export default YourComponent;

关键逻辑说明 #

• 后端通过offset和limit实现分批查询，has_more字段告知前端是否还有剩余数据
• 前端通过递归调用loadNextBatch，每次请求完成后更新偏移量和记录列表，触发组件即时渲染
• 可选的LOAD_DELAY参数可控制批次加载间隔，让逐步加载效果更直观
• 使用AbortController和clearTimeout避免组件卸载后出现内存泄漏

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