在React Context组件中使用useTranslation Hook报错求助

1. 严格遵守Hook调用规则 #

确保useTranslation在Context Provider组件的顶层作用域调用，不能嵌套在useEffect、useCallback等Hook内部，也不能和任何条件判断逻辑绑定。示例代码：

import { createContext, useContext } from 'react';
import { useTranslation } from 'react-i18next';

const MyContext = createContext();

export function MyContextProvider({ children }) {
  // 必须在组件顶层调用，符合Hook规则
  const { t, i18n } = useTranslation();

  const contextValue = {
    translate: t,
    changeLanguage: i18n.changeLanguage
  };

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

export function useMyContext() {
  return useContext(MyContext);
}

2. 适配react-i18n与React版本 #

Error: Should have a queue错误常因版本不兼容导致：

• React 18.x需搭配react-i18n ≥12.0.0；
• React 17.x需搭配react-i18n 11.x版本。
  执行对应命令调整版本：

# React 18适配
npm install react-i18next@latest i18next@latest
# React 17适配
npm install react-i18next@11.18.6 i18next@21.9.2

3. 规范副作用执行时机 #

不要在Context组件顶层直接执行语言切换等副作用操作，必须放到useEffect中：

export function MyContextProvider({ children }) {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    // 在这里执行语言初始化等异步/状态变更操作
    const savedLang = localStorage.getItem('lang');
    if (savedLang) {
      i18n.changeLanguage(savedLang);
    }
  }, [i18n]);

  // 其余代码...
}

4. 正确初始化i18n实例 #

确保i18n实例在组件外部初始化，避免每次组件渲染都重新创建实例引发React内部队列错误：

// 组件外部初始化i18n
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: { /* 你的语言资源配置 */ },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false }
});

// 之后在Context组件中直接导入使用

5. 临时方案：改用高阶组件 #

如果以上方法均无效，可暂时用withTranslation高阶组件绕过Hook调用问题：

import { withTranslation } from 'react-i18next';
import React from 'react';

class MyContextProvider extends React.Component {
  render() {
    const { t, i18n } = this.props;
    const contextValue = { translate: t, changeLanguage: i18n.changeLanguage };
    return (
      <MyContext.Provider value={contextValue}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default withTranslation()(MyContextProvider);

内容的提问来源于stack exchange，提问作者Matgorn