React Native，将 locale 参数从 i18next 传递到 Axios 配置文件会出现 Invalid hook call 错误

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;

在我的配置中设置语言环境 header 的正确方法是什么？

Answer 1

您收到此错误是因为应在 React 组件或另一个挂钩内调用一个挂钩。参见 Rules of Hooks。例如，您可以执行以下操作：

将设置 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 <></>
}

React Native，将 locale 参数从 i18next 传递到 Axios 配置文件会出现 Invalid hook call 错误

React Native, passing locale parameter from i18next to Axios config file gives Invalid hook call error

javascript

reactjs

react-native

axios