React，在我的服务中获取 Invalid Hook Call 以创建 axios 实例

Question

我有一个简单的service.js ，如下所示：

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

function GetApi() {
  const { API } = useContext(APIContext)
  console.log(API)
  return API
}

const api = axios.create({
  baseURL: `${GetApi()}`,
})

export default api

每当我尝试使用 API 时，它都会向我抛出一个错误：

Invalid Hook Call. Hooks can only be called inside the body of a function component

Answer 1

您只能在 React 组件或自定义钩子中调用钩子useContext （请参阅钩子规则）。

你可以做的就是把你的服务变成一个钩子：

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

function useGetApi() {
  const { API } = useContext(APIContext)
  console.log(API)
  const api = axios.create({
    baseURL: API,
  })
  return api;
}

export default useGetApi;

然后你在一个组件或另一个钩子中使用它，如下所示：

const api = useGetApi();

Answer 2

你展示的东西是函数而不是函数组件，钩子应该存在于其中。 如果要在子组件中使用它们，则必须将钩子放在功能组件的主体中，将状态作为道具传递，将设置器作为回调传递。

Answer 3

APIContext包含什么？ Function component意味着你必须返回 jsx，技术上是一个反应节点。 所以在你的情况下GetApi不是一个反应组件，而是一个普通的功能。