Estoy tratando de implementar un parámetro de configuración regional en mi archivo axiosConfig:
import axios from "axios"; const instance = axios.create({ baseURL: "http://10.0.2.2:8000/api", timeout: 2000, }); instance.defaults.headers.common["locale"] = "en"; export default instance;En cada pantalla realizo mis llamadas get y post en pantallas como tales:
axiosConfig .get("/someroute") .then((response) => { //console.log(response.data); }) .catch((error) => { console.log(error.message); });El código anterior funciona según lo previsto. Ahora quiero pasar un parámetro de "configuración regional" a todas mis llamadas axios. Este parámetro provendrá de la configuración regional de la aplicación (yo uso i18next). Cuando lo implemento como se muestra a continuación, arroja un error de enlace no válido.
import axios from "axios"; import { useTranslation } from "react-i18next"; const { i18n } = useTranslation(); const instance = axios.create({ baseURL: "http://10.0.2.2:8000/api", timeout: 2000, }); instance.defaults.headers.common["locale"] = i18n.language; export default instance;¿Cuál sería la forma correcta de establecer el encabezado de configuración regional en mi configuración?
Está recibiendo este error porque se debe llamar a un enlace en un componente React o dentro de otro enlace. Ver Reglas de Hooks . Y esto es lo que podrías hacer, por ejemplo:
import axios from "axios"; import { useTranslation } from "react-i18next"; const useAxiosInstance = ()=>{ const { i18n } = useTranslation(); const instance = axios.create({ baseURL: "http://10.0.2.2:8000/api", timeout: 2000, }); instance.defaults.headers.common["locale"] = i18n.language; return instance; } export default useAxiosInstance; import {useEffect} from "react"; import useAxiosConfig from "./path"; const AxiosConsumer = ()=>{ const axiosConfig = useAxiosConfig(); useEffect(()=>{ axiosConfig .get("/someroute") .then((response) => { //console.log(response.data); }) .catch((error) => { console.log(error.message); }); },[axiosConfig]); return <></> }