React中Axios重复发送4次请求问题排查求助

问题代码 #

const Test = () => {
  useEffect(() => {
    axios.get(`test-messages`).then((result) => {
      console.log("test");
    });
  });

  return <h1>Test</h1>;
};

export default Test;

核心原因 #

• useEffect未设置依赖数组：你的useEffect没有传入第二个参数（依赖数组），这会导致组件每一次渲染时都会重新执行这个effect。只要组件有任何触发重新渲染的操作，哪怕是无意义的重复渲染，都会再次发起请求。
• 开发环境严格模式的双重执行：React 18开发环境默认开启Strict Mode，它会对组件执行「挂载-卸载-重新挂载」的操作，用来检测未正确清理的副作用。这会让useEffect被执行两次——第一次挂载执行，重新挂载时再次执行。如果组件本身因为其他原因（比如父组件重新渲染）触发了两次渲染，就会叠加出四次请求。
• 未处理卸载时的请求取消：严格模式下组件被卸载时，之前发起的axios请求如果没有被取消，可能仍会继续执行，但服务器可能对重复请求做了限流或返回失败，这就解释了为什么只有2次能拿到有效返回。

解决方案 #

给useEffect添加空依赖数组，让它只在组件首次挂载时执行一次：

useEffect(() => {
  axios.get(`test-messages`).then((result) => {
    console.log("test");
  });
}, []); // 空依赖数组

如果需要在依赖变化时重新请求，就把对应的依赖项加入数组中。另外，建议给请求添加取消逻辑，避免无效请求：

useEffect(() => {
  const source = axios.CancelToken.source();
  
  axios.get(`test-messages`, { cancelToken: source.token })
    .then((result) => {
      console.log("test");
    })
    .catch((err) => {
      if (axios.isCancel(err)) {
        console.log("请求已取消", err.message);
      }
    });

  return () => {
    source.cancel("组件卸载，取消请求");
  };
}, []);

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