React useEffect依赖不变却触发执行，如何仅在projectId变更时请求数据

问题根因 #

你遇到的重复触发问题核心是两个原因导致的：

• 标签切换时的组件卸载重挂载：如果你的两个标签是条件渲染实现的（比如根据激活状态判断渲染对应标签组件），切换到Project ideas标签时，Projects标签对应的组件会被销毁，切回时组件重新初始化，useEffect在组件首次挂载完成后必然会执行一次，和依赖项是否变化无关。
• 额外小概率原因：如果你没有用React Redux官方提供的useDispatch返回的实例，而是自定义封装了dispatch方法，可能存在dispatch引用不稳定的问题，会导致useEffect误触发，但官方useDispatch返回的实例本身是引用稳定的，通常不会出现这个问题。

解决方案 #

你可以根据业务场景选以下任意一种方案实现：

方案1：添加请求前缓存判断（改造成本最低） #

在发请求前先判断Redux中是否已经存在对应projectId的项目数据，存在就直接跳过请求：

// 先从Redux中取对应id的已有数据
const cachedProject = useSelector(state => state.projects.byId[projectId]);

useEffect(() => {
  // 只有缓存不存在时才发起请求
  if (!cachedProject) {
    dispatch(getProjects(projectId));
  }
}, [projectId, dispatch, cachedProject]);

方案2：请求逻辑上移到公共父组件（最符合业务逻辑） #

两个标签都共用同一份项目数据，直接把请求逻辑放在两个标签的公共父组件中即可，父组件不会因为标签切换被卸载，useEffect只会在projectId实际发生变化时才触发：

// 父组件代码
const TabContainer = () => {
  const [activeTab, setActiveTab] = useState('projects');
  const projectId = useSelector(state => state.route.params.projectId);

  // 父组件内发起请求，不受子标签切换影响
  useEffect(() => {
    dispatch(getProjects(projectId));
  }, [projectId, dispatch]);

  return (
    <div>
      <TabHeader activeTab={activeTab} onChange={setActiveTab} />
      {activeTab === 'projects' ? <ProjectsTab /> : <ProjectIdeasTab />}
    </div>
  )
}

两个标签组件只需要通过useSelector取Redux中的数据渲染即可，不需要自己管理请求逻辑。

方案3：Saga层加全局重复请求拦截（兜底方案） #

如果不想改前端组件逻辑，可以在Saga的请求逻辑中加判断：接收到getProjects请求时，先检查Redux中是否已有对应projectId的缓存，或者是否有同id的请求正在处理，符合条件就直接跳过后续请求流程，从源头避免重复请求。

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