React拦截器报错：无效Hook调用问题排查求助

错误核心原因 #

你的AxiosInterceptor函数虽然定义为函数形式，但没有作为React组件渲染，而是被当成普通函数调用，违反了React钩子只能在函数组件或自定义钩子顶层调用的规则，因此触发了Invalid hook call错误。

具体排查解决步骤 #

• 检查AxiosInterceptor的调用方式
  如果你是直接用普通函数语法调用（比如AxiosInterceptor(dialogueModalProps)），必须改成JSX组件渲染方式：

  // 错误调用方式
  // AxiosInterceptor(xxx);
  
  // 正确调用方式
  <AxiosInterceptor dialogueModalChargement={xxx} />
  

  注：作为组件渲染时，函数名需大写开头（你的函数已符合要求）。

• 考虑将逻辑改为自定义钩子（更适合拦截器复用场景）
  如果Axios拦截器逻辑需要在多组件复用且依赖React状态，建议改成自定义钩子，命名以use开头：

  import { useState, useEffect } from 'react';
  import axios from 'axios';
  
  export function useAxiosInterceptor(dialogueModalChargement: any) {
      const [isRalentisement, setRalentisement] = useState(false);
  
      const setupInterceptor = () => {
          axios.interceptors.request.use(config => {
              setRalentisement(true);
              // 其他拦截器逻辑
              return config;
          });
      };
  
      useEffect(() => {
          setupInterceptor();
          // 组件卸载时清理拦截器
          return () => axios.interceptors.request.clear();
      }, []);
  
      return { isRalentisement };
  }
  
  // 在函数组件中使用
  function App() {
      const { isRalentisement } = useAxiosInterceptor(yourModalProps);
      // ...
  }
  

• 排查多React副本或版本不匹配问题

  1. 执行npm ls react（npm项目）或yarn list react（yarn项目），查看是否存在多个React版本，若有则删除重复依赖，统一版本。
  2. 确认react和react-dom（或对应渲染器如react-native）版本完全一致，比如均使用18.x系列版本。

• 严格遵守钩子调用规则
  确保所有钩子（如useState、useEffect）都在函数组件或自定义钩子的顶层作用域调用，不能放在循环、条件判断、嵌套函数内部。

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