我正在嘗試在我的 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;
在每個螢屏上，我都會在螢屏上進行 get 和 post 呼叫，如下所示：
axiosConfig
.get("/someroute")
.then((response) => {
//console.log(response.data);
})
.catch((error) => {
console.log(error.message);
});
上面的代碼按預期作業。現在我想將“語言環境”引數傳遞給我所有的 axios 呼叫。此引數將來自應用程式區域設定（我使用 i18next）。當我如下實作它時，它會拋出一個無效的鉤子錯誤。
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;
在我的配置中設定語言環境標頭的正確方法是什么？
uj5u.com熱心網友回復：
您收到此錯誤是因為應該在 React 組件或另一個鉤子中呼叫鉤子。請參閱掛鉤規則。例如，您可以執行以下操作：
- 將您設定 axios 實體的檔案轉換為掛鉤：
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;
- 您在使用 axios 配置的檔案頂部包含鉤子，并以這種方式使用它作為示例：
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 <></>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486052.html
標籤：javascript 反应 反应式 axios