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不是一個反應組件，而是一個普通的功能。