React创建axios实例服务时报Invalid Hook Call错误如何解决

安全阿岳

2026-8-28

错误原因

你触发Invalid Hook Call报错的核心原因是违反了React Hooks的调用规则：

Hooks 仅允许在React函数组件顶层、自定义Hook顶层调用，你写的GetApi是普通工具函数，不属于上述两种合法调用场景，内部直接调用useContext本身就不符合规则。
你的axios.create是在JS模块加载阶段就直接执行的，这个时机远早于React组件树渲染、Context挂载完成的阶段，不仅拿不到Context里存的API地址，非合法场景调用Hook会直接抛出错误。

可行修复方案

你可以根据自己的业务场景选对应的写法：

方案1：封装为自定义Hook（适合API地址可能动态变化的场景，最符合React设计规范）
把axios实例的初始化逻辑放到自定义Hook里，只有在组件/其他Hook顶层调用的时候才会执行，能合法拿到Context值：

// service.js
import axios from 'axios'
import { useContext, useMemo } from 'react'
import APIContext from '../context/api/context'

// 自定义Hook必须以use开头命名
export function useApi() {
  const { API } = useContext(APIContext)
  // 用useMemo缓存实例，避免每次渲染都重新创建axios实例
  const apiInstance = useMemo(() => axios.create({
    baseURL: API
  }), [API])
  return apiInstance
}

使用时必须在函数组件顶层调用这个Hook拿到实例：

// 组件内使用示例
import { useApi } from '@/utils/service'

function DataPage() {
  const api = useApi()

  const loadList = async () => {
    const { data } = await api.get('/list')
    // 处理返回逻辑
  }

  return <div>页面内容</div>
}

方案2：静态配置baseURL（适合API地址固定不变的场景，使用最灵活）
如果存在Context里的API地址是项目启动后就不会变的常量，完全没必要通过Context传递，直接从环境变量读取或者写死配置即可，不需要用到Hook：

// service.js
import axios from 'axios'
// 从环境变量取配置，或者直接写死接口域名
const BASE_URL = process.env.REACT_APP_API_DOMAIN

const api = axios.create({
  baseURL: BASE_URL
})

export default api

这种写法导出的api实例可以在组件、普通工具函数里任意导入使用，不会触发Hook报错。

方案3：在Context Provider内初始化实例后全局下发（适合需要全局复用同一个动态配置实例的场景）
你可以直接在APIContext对应的Provider组件里初始化好axios实例，把实例本身放到Context里下发，业务组件直接从Context拿现成的实例用即可，不需要重复创建：

// context/api/context.js 示例
import { createContext, useMemo } from 'react'
import axios from 'axios'

const APIContext = createContext(null)

export function APIProvider({ children }) {
  // 这里可以根据业务逻辑动态拿到baseURL，比如从登录态、用户配置里取
  const API = 'https://your-api-domain.com'
  const api = useMemo(() => axios.create({ baseURL: API }), [API])

  return (
    <APIContext.Provider value={{ API, api }}>
      {children}
    </APIContext.Provider>
  )
}

export default APIContext

组件内使用时直接拿实例即可：

import { useContext } from 'react'
import APIContext from '../context/api/context'

function DataPage() {
  const { api } = useContext(APIContext)
  // 直接用api发请求
}

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