Axios项目中React useEffect重复调用API的问题解析

问题现象分析

在开发基于React和Axios的前端应用时，开发者经常会遇到一个典型问题：在useEffect钩子中发起的API请求会被意外地执行两次。这个问题在Axios项目中尤为常见，特别是在处理表单提交后的异步操作时。

核心问题定位

通过分析问题描述，我们可以看到几个关键点：

1. 开发者使用useEffect钩子来发起Axios请求
2. 依赖数组设置为空数组([])，理论上应该只执行一次
3. 但实际上API端点被调用了两次
4. 第二次调用时出现了代理错误

根本原因

这个问题实际上与Axios本身无关，而是React严格模式下的预期行为。在开发环境中，React会故意重复执行某些钩子函数，包括：

• 组件挂载时的useEffect
• 状态更新器函数(setState的第一个参数)
• 某些生命周期方法

这种设计是为了帮助开发者发现潜在的副作用问题，确保代码在多次执行时仍然表现一致。

解决方案

针对这个问题，有以下几种解决方案：

1. 使用引用标识：通过useRef创建一个标识，确保逻辑只执行一次

const executedRef = useRef(false);
useEffect(() => {
  if (!executedRef.current) {
    executedRef.current = true;
    // 执行API调用
  }
}, []);

2. 添加清理函数：虽然不能阻止首次的双重调用，但可以确保后续调用的清理

useEffect(() => {
  let ignore = false;
  
  const fetchData = async () => {
    const result = await axios.get('/api/data');
    if (!ignore) {
      setData(result.data);
    }
  };
  
  fetchData();
  
  return () => { ignore = true; };
}, []);

3. 使用自定义Hook：封装一个只执行一次的Hook

function useOnceEffect(effect) {
  const onceRef = useRef(false);
  
  useEffect(() => {
    if (!onceRef.current) {
      onceRef.current = true;
      return effect();
    }
  }, [effect]);
}

生产环境注意事项

值得注意的是，这个问题主要出现在开发环境。当应用构建为生产版本时，React不会执行这种双重调用。因此，虽然需要解决这个问题以确保开发体验，但它不会影响最终用户。

最佳实践建议

1. 始终假设useEffect可能会被多次调用
2. 确保API请求是幂等的（多次执行产生相同结果）
3. 考虑使用请求取消功能（Axios的CancelToken）
4. 对于关键操作，添加客户端防重机制

通过理解React的这种行为模式，开发者可以更好地构建健壮的应用程序，避免在Axios请求处理中出现意外行为。