切换分页时useEffect触发Axios重复请求问题求助

兄弟，这种重复请求的坑我之前踩过好几次！大概率是两个原因：要么是useEffect的依赖项没配置对，要么是没及时取消未完成的旧请求。咱们一步步来排查：

1. 先检查useEffect的依赖数组 #

你是不是把一些不必要的、会频繁变化的变量（比如复杂对象、未用useCallback包裹的函数）放进了依赖里？比如如果你的useEffect依赖了某个Redux state对象，每次dispatch后这个对象的引用会更新，哪怕userId没变化，也会触发useEffect重新执行，导致重复请求。

正确的做法是只把直接用到的原始值（比如userId本身）放进依赖数组，举个反例和正例：

❌ 错误示例（依赖了复杂对象）：

const userPayload = useSelector(state => state.user.payload);
useEffect(() => {
  axios.get(`/api/users/${userPayload.userId}`);
}, [userPayload]); // userPayload是对象，每次dispatch都会新建，导致重复触发

✅ 正确示例（只依赖userId）：

const userId = useSelector(state => state.user.payload.userId);
useEffect(() => {
  axios.get(`/api/users/${userId}`);
}, [userId]); // 只有userId变化时才触发请求

如果必须依赖函数，记得用useCallback包裹，避免每次渲染都生成新的函数引用触发useEffect。

2. 取消未完成的旧请求 #

当你点击切换按钮时，之前的请求可能还处于pending状态，这时候新请求已经发出去了，旧请求完成后还是会留下痕迹（哪怕你渲染空div，请求已经发出去了）。这时候需要用Axios的取消机制来终止旧请求：

import axios from 'axios';

// 组件内
const userId = useSelector(state => state.user.payload.userId);

useEffect(() => {
  // 创建取消令牌
  const cancelSource = axios.CancelToken.source();

  const fetchUser = async () => {
    try {
      const res = await axios.get(`/api/users/${userId}`, {
        cancelToken: cancelSource.token
      });
      // 处理用户数据
    } catch (err) {
      // 捕获取消请求的错误，避免报错
      if (!axios.isCancel(err)) {
        console.error('请求失败:', err);
      }
    }
  };

  fetchUser();

  // 组件卸载或userId变化时，取消之前的请求
  return () => {
    cancelSource.cancel('用户切换，取消旧请求');
  };
}, [userId]);

这样每次userId变化时，之前还在pending的请求会被直接取消，不会再发起无效的旧请求。

3. 排查Redux状态更新的时机 #

另外你可以检查一下：点击按钮后，Redux的payload更新和URL参数的更新是不是异步的？比如URL参数先更新了，Redux的userId还没更新，导致useEffect先触发一次旧ID的请求，然后Redux状态更新后又触发一次新ID的请求。这种情况可以确保两者同步，或者统一从一个来源获取userId（比如从URL参数里取，而不是Redux；或者反过来）。

按这几步排查下来，应该就能解决重复请求的问题了！

内容的提问来源于stack exchange，提问作者user.io