React Native，从i18next传递区域参数到Axios配置文件给出无效钩子调用错误 &g

Question

我试图在我的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);
});

以上代码按预期工作。现在我要传递一个"locale"参数输入到所有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;

在我的配置中设置区域设置头的正确方法是什么?

Answer 1

你会得到这个错误，因为一个钩子应该在React组件中或在另一个钩子中调用。参见钩子规则。你可以这样做，例如:

1. 将设置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;

2. 将钩子包含在使用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 <></>
}