Tengo un service.js
simple que se ve así:
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
Cada vez que trato de usar la API, me arroja un error que dice:
Invalid Hook Call. Hooks can only be called inside the body of a function component
Puede llamar a un enlace, useContext
en su caso, solo en un componente de React o en un enlace personalizado (consulte las Reglas de los enlaces ).
Lo que puedes hacer es transformar tu servicio en un gancho:
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;
Y lo usas dentro de un componente u otro enlace como este:
const api = useGetApi();
Lo que muestra es la función y no un componente funcional, donde debería vivir un gancho. Debe colocar ganchos en el cuerpo de los componentes funcionales, pasar estados como accesorios y setters como devoluciones de llamada si desea usarlos como componentes secundarios.
¿Qué contiene APIContext
? Function component
significa que debe devolver jsx, técnicamente un nodo de reacción. Entonces, en su caso, GetApi
no es un componente de reacción sino una función simple.