isSuccess为真时触发RTK dispatch重复执行问题如何解决

你当前重复触发dispatch的核心原因是违反了React的基本执行规则：组件渲染阶段不能执行副作用操作。
你写在组件函数体里的isSuccess && dispatch(addCurrentMod(data))会在每一次组件重渲染时执行判断，只要isSuccess为true就会触发dispatch；而dispatch更新全局状态又会反过来触发组件重渲染，自然会反复触发多次。
你把逻辑移入useEffect后出现undefined报错，只是因为没有加全前置判断，在data还没返回的渲染阶段就执行了依赖data的dispatch逻辑。

把带dispatch的副作用逻辑放到useEffect中，增加双重判断：只有请求成功、且data已经是有效值时才执行dispatch，同时正确声明依赖项即可：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
// 其他业务模块引入

const YourComponent = () => {
  const router = useRouter();
  const num = router.query.id;
  const dispatch = useDispatch();
  const { data, error, isLoading, isSuccess } = useModByIdQuery(num, {
    // 可选优化：当路由参数num还没就绪时跳过无效请求，从根源避免初始无效data
    skip: !num
  });

  useEffect(() => {
    // 两个条件同时满足才执行：1. 请求成功 2. data不为undefined
    if (isSuccess && data) {
      dispatch(addCurrentMod(data));
    }
  }, [isSuccess, data, dispatch]);

  // 剩余组件渲染逻辑
  return (
    // 你的业务JSX
  )
}

补充说明 #

• 只要你把副作用严格收敛在useEffect、事件回调这类React认可的副作用执行位置，加上明确的触发条件判断，就不会出现重复执行、拿不到有效值的问题。
• 不要尝试用ref存执行标记规避重复触发，属于多此一举的hack写法，正确配置useEffect依赖和判断条件就足够解决问题。
• 如果你的需求是全局维度的接口数据同步，而不是单个组件内的逻辑，也可以在RTK Query的endpoint配置中通过onQueryStarted生命周期配置全局回调，不需要在组件内单独写dispatch逻辑。

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