React双useEffect分页组件如何避免重复请求并保留内部page状态

问题根因 #

原有实现的两次请求问题来源于两个独立useEffect的执行顺序：当filters属性变更触发组件重渲染时，此时page仍为旧值，依赖[filters, page]的请求effect会先触发，执行旧页码+新过滤条件的请求；随后重置页码的effect才执行，更新page为0，触发第二次重渲染后再次发起新页码+新过滤条件的请求。

最优解决方案：合并查询状态 #

将filters和page合并为同一个状态对象，过滤条件变更时直接同步更新整个状态，即可避免多余请求，同时保留分页状态在组件内部，无需使用useRef也无需提升状态：

function Fetcher(filters) {
  // 合并filters和page为单一查询状态
  const [query, setQuery] = React.useState({ filters, page: 0 });

  const nextPage = React.useCallback(() => {
    setQuery(q => ({ ...q, page: q.page + 1 }));
  }, []);

  // 监听外部传入的filters变更，同步更新查询状态并重置页码
  React.useEffect(() => {
    setQuery({ filters, page: 0 });
  }, [filters]);

  // 仅监听合并后的查询状态，只会在状态完整更新后触发一次请求
  React.useEffect(() => {
    externalRequest(query.filters, query.page);
  }, [query]);

  // 如果需要显示当前页码，直接取query.page即可，状态变化会自动触发重渲染
  return <button onClick={nextPage}>下一页（当前第{query.page + 1}页）</button>;
}

该方案的优势：

• 完全消除多余请求，过滤条件变更时只会触发一次数据查询
• 分页状态保留在组件内部，不会对外暴露依赖
• 页码仍是响应式状态，变更会自动触发重渲染，无需手动强制更新

备选方案：请求取消 #

如果不想调整现有状态结构，可以通过AbortController终止无效的前序请求，避免多余请求产生副作用：

function Fetcher(filters) {
  const [page, setPage] = React.useState(0);

  const nextPage = React.useCallback(() => {
    setPage((p) => p + 1);
  }, []);

  React.useEffect(() => {
    setPage(0);
  }, [filters]);

  React.useEffect(() => {
    const controller = new AbortController();
    // 传入signal参数，终止请求时会自动取消本次调用
    externalRequest(filters, page, { signal: controller.signal });
    // 下次effect触发前执行取消逻辑
    return () => controller.abort();
  }, [filters, page]);

  return <button onClick={nextPage}></button>;
}

该方案无需调整原有状态逻辑，适合旧项目快速修复问题。

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