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 apiCada 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 componentPuede 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.