主表切换后FetchRow功能失效，如何维持子表分页加载（每次25条）？

这问题我之前帮同事排查过类似场景，核心原因基本是切换主表记录时，没有重置子表的分页状态，也没重新绑定带关联条件的分页查询逻辑，导致框架自动触发了全量加载。下面给你分步解决的方案：

核心修复步骤 #

1. 重置分页状态变量 #

每次切换主表记录时，必须把分页相关的状态全部重置：

• 当前页码currentPage设为1
• 已加载记录数loadedCount清零
• 偏移量offset重置为0（因为offset = (currentPage-1)*pageSize）

这一步是为了让FetchRow接口从第一页开始重新加载，而不是接着之前的页码继续追加。

2. 强制绑定主表关联条件到分页查询 #

切换主表后，子表的所有FetchRow请求必须带上当前选中主表记录的关联主键（比如table1_id），而且这个条件要和分页参数（offset、limit）一起作为查询条件传递。

举个后端SQL的例子（假设用MySQL）：

SELECT * FROM Table2 
WHERE table1_id = ?  -- 这里替换成当前选中的Table1主键
LIMIT 25 OFFSET ?    -- 分页参数，每次切换后offset从0开始

如果是前端调用接口，要确保每次切换主表后，第一个FetchRow请求的参数里包含新的table1Id和offset=0。

3. 关闭自动全量加载的触发逻辑 #

检查你使用的框架/工具是否在主表关联关系变化时，默认触发子表的全量加载：

• 低代码平台：找到子表的关联配置，把「自动加载全部数据」的选项改成「按需加载」或「分页加载」
• 自定义前端：排查是否有监听主表变化的事件中，调用了全量获取子表数据的接口，把这部分逻辑替换成分页加载的逻辑

4. 重置前端子表渲染数据 #

切换主表后，先清空子表的现有数据，再加载第一页的25条记录，而不是在原有数据上追加。比如前端用React的话：

const [table2Data, setTable2Data] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 25;

// 主表切换时的处理函数
const handleTable1Change = (selectedRow) => {
  // 重置分页状态
  setCurrentPage(1);
  // 清空子表数据
  setTable2Data([]);
  
  // 调用分页接口，带上新的主表ID
  fetch(`/api/table2/fetch?table1Id=${selectedRow.id}&offset=0&limit=${pageSize}`)
    .then(res => res.json())
    .then(data => setTable2Data(data.rows));
};

// 加载下一页的函数（保持原有逻辑）
const loadNextPage = () => {
  const nextPage = currentPage + 1;
  const offset = (nextPage - 1) * pageSize;
  fetch(`/api/table2/fetch?table1Id=${currentSelectedTable1Id}&offset=${offset}&limit=${pageSize}`)
    .then(res => res.json())
    .then(data => setTable2Data(prev => [...prev, ...data.rows]));
  setCurrentPage(nextPage);
};

5. 验证请求参数的正确性 #

切换主表后，打开浏览器的开发者工具（Network标签），查看第一个FetchRow请求的参数：

• 确认table1Id是当前选中的主表记录ID
• 确认offset是0，limit是25
• 如果参数不对，检查你的参数传递逻辑是否有遗漏或错误

额外注意事项 #

• 如果子表数据量极大（超百万），建议后端对关联查询加索引（比如给table1_id加索引），避免分页查询卡顿
• 有些框架会缓存子表数据，切换主表后要清空对应的缓存，防止加载旧数据

内容的提问来源于stack exchange，提问作者Amélie