React useReducer的dispatch无限循环问题：页面加载单次调用实现

嘿，我来帮你搞定这个无限循环的问题～先理清楚你原来代码里的坑，再给你几个靠谱的解决方案：

先说说你原来代码的问题 #

第一个方案的无限循环原因 #

你第一个useEffect把value作为依赖，却又在effect内部调用setValue(token)——这直接形成了闭环：setValue修改value，触发effect重新执行，再次调用setValue，无限循环直到内存耗尽。而且其实你完全不需要用额外的value state中转token，一步到位就行。

第二个方案的dispatch未触发原因 #

你写的useCallback逻辑有误：const dis = useCallback(() => dispatch, []) 里的dis是一个返回dispatch函数的外层函数，不是直接的dispatch方法。所以你调用dis({ type: 'TEST_TYPE', ... })时，是把action对象传给了这个外层函数，而非真正的dispatch，自然不会触发reducer更新。

靠谱的解决方案 #

方案一：最简洁的单次执行（强烈推荐） #

直接用空依赖数组的useEffect，它只会在组件挂载（页面加载）时执行一次，完美规避循环：

const [state, dispatch] = useReducer(/* 这里传入你的reducer函数 */);

useEffect(() => {
  // 从URL中提取token
  const query = window.location.search || '';
  const queryString = new URLSearchParams(query);
  const token = queryString.get('token');
  
  // 存在token时调用dispatch
  if (token) {
    dispatch({ 
      type: 'TEST_TYPE', 
      payload: { data: token } 
    });
  }
}, []); // 空依赖数组确保只执行一次

为什么这样安全？因为React中dispatch函数的引用是稳定的，不会随组件重渲染变化，所以可以放心放在空依赖的effect里，无需添加到依赖数组。

方案二：需要保留token到state的场景 #

如果后续组件需要用到这个token，要存在state里，那调整依赖即可避免循环：

const [state, dispatch] = useReducer(/* 你的reducer函数 */);
const [token, setToken] = useState(null);

// 仅在挂载时获取一次URL中的token，存入state
useEffect(() => {
  const query = window.location.search || '';
  const queryString = new URLSearchParams(query);
  const urlToken = queryString.get('token');
  setToken(urlToken);
}, []); // 空依赖，只执行一次

// 当token从null变为有效值时，调用dispatch
useEffect(() => {
  if (token) {
    dispatch({ 
      type: 'TEST_TYPE', 
      payload: { data: token } 
    });
  }
}, [token, dispatch]); // 依赖token和dispatch（dispatch稳定，可加可不加）

这里第一个effect只执行一次，不会因token变化重复触发；第二个effect仅在token从null变为实际值时执行一次，不会无限循环。

方案三：修正你第二个方案的写法（不推荐，仅作参考） #

如果一定要用useCallback，得把dispatch的调用逻辑正确包裹：

const [state, dispatch] = useReducer(/* 你的reducer函数 */);

// 正确包裹dispatch的调用逻辑
const dis = useCallback((action) => {
  dispatch(action);
}, [dispatch]); // dispatch引用稳定，依赖数组可留空或添加dispatch

useEffect(() => {
  const query = window.location.search || '';
  const queryString = new URLSearchParams(query);
  const token = queryString.get('token');
  
  if (token) {
    dis({ 
      type: 'TEST_TYPE', 
      payload: { data: token } 
    });
  }
}, [dis]); // 依赖dis，而dis几乎不会更新

不过这个方案没必要，直接用空依赖的effect更简洁高效。

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