React URL变更时useEffect内逻辑重复执行问题解决方案

• 状态重置不是useState本身的逻辑问题，核心原因是你编写这段逻辑的组件，在跳转到其他模块路由时被完全卸载了。等路由切回、组件重新挂载时，useState会重新执行初始化逻辑，filtersFetched自然回到初始值false，最终导致拉取逻辑重复触发。
• 原代码存在冗余设计：把filtersFetched加入useEffect依赖数组是不必要的，这个值仅作为一次性拉取的判断标记，不需要作为触发effect更新的依赖项。

方案1：状态提升（最推荐的长期方案） #

• 把发布者列表数据、拉取完成标记，移动到不会随路由切换卸载的上层节点存储：比如应用根Layout组件、全局路由容器，或者接入项目已使用的全局状态管理（Redux/Zustand/Context都可以）。
• 这种方式下，拉取逻辑只需要在应用初始化、或者第一次匹配到带publisher_id参数的路由时执行一次，后续不管业务组件怎么挂载卸载，都能直接读取全局已经存储好的数据，不会重复发起请求。

方案2：模块级变量+Ref做持久化标记（改造成本最低） #

• 单页应用运行时，组件外声明的模块级变量不会随组件卸载重置，搭配useRef存储组件内的拉取标记，不需要调整全局状态结构就能实现一次性拉取，示例代码如下：

// 组件外部声明，整个应用运行期间持久保留值
let publisherFetchDone = false;
let cachedPublisherList: API.Publisher[] = [];

// 组件内部逻辑
const [publishers, setPublishers] = React.useState<API.Publisher[]>(cachedPublisherList);
const fetchMarkRef = React.useRef(publisherFetchDone);

useEffect(() => {
  const hasPublisherParam = history.location.search.includes("publisher_id=");
  // 只有URL带目标参数、且从未完成过拉取时才执行请求
  if (hasPublisherParam && !fetchMarkRef.current) {
    // 提前打标记，避免并发场景下重复触发
    fetchMarkRef.current = true;
    publisherFetchDone = true;

    fetchAllAxiosResponse<API.Publisher>(
      CatalogService.getPublishers,
      new URLSearchParams(),
      1500
    )
    .then((data) => {
      cachedPublisherList = data;
      setPublishers(data);
    })
    .catch((err) => {
      // 请求失败时重置标记，允许后续操作触发重试
      fetchMarkRef.current = false;
      publisherFetchDone = false;
    });
  }
// 仅依赖history.location即可，不需要把拉取标记加入依赖数组
}, [history.location]);

const asyncFilters = {
  publisher_id: fetchMarkRef.current,
};

方案3：组件保活 #

• 如果项目已经接入了路由保活能力（比如搭配react-activation类的库实现KeepAlive功能），直接给当前组件添加保活配置，路由切换时组件不会被卸载，内部state会完整保留，也能解决重复触发请求的问题。

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