React.js自定义i18n配置时i18n.language为undefined问题求解

• i18next 初始化是异步操作，你引入了i18next-http-backend插件需要远程加载翻译资源，在初始化未完成时i18n.language确实为undefined。控制台打印完整i18n对象时展示的是对象最终值，因为控制台读取对象属性是懒加载的，你展开对象时i18n已经完成初始化，所以能看到language属性存在。
• 你业务代码的导入路径错误：你自定义的i18n配置是本地导出的实例，但业务代码中写的是import i18n from 'i18n'，直接导入了官方依赖包的未初始化实例，这也是导致取值为空的核心原因之一。

你可以根据业务场景选择对应方案：

1. 修正i18n导入路径 #

首先将业务代码中的导入语句替换为你本地i18n配置文件的路径，例如你的配置文件存放在src/i18n.js，则修改为：

import i18n from './i18n' // 替换为你的实际配置文件路径

2. 非组件场景添加初始化判断兜底 #

如果你的工具函数需要在非组件环境调用，可以添加初始化状态判断，兜底逻辑和你初始化时的lng规则保持一致即可：

export const defaultCountryByLanguage = () => {
  // 未初始化时用路径判断兜底
  const currentLng = i18n.isInitialized 
    ? i18n.language 
    : (window.location.pathname.split('/')[1] !== 'en' ? 'de' : 'en')
  return currentLng === 'en'
    ? { country: 'Germany', code: 'DE', prefix: '49', nationality: 'German' }
    : { country: 'Deutschland', code: 'DE', prefix: '49', nationality: 'Deutsch' };
}

也可以用可选链+空值合并做简易兜底：

const currentLng = i18n?.language ?? 'de'

3. 组件内使用官方hooks取值 #

在React组件中不要直接导入i18n实例，使用react-i18next提供的useTranslation钩子获取已经初始化完成的i18n实例：

import { useTranslation } from 'react-i18next'

const YourComponent = () => {
  const { i18n } = useTranslation()
  const defaultCountry = i18n.language === 'en' 
    ? { country: 'Germany', code: 'DE', prefix: '49', nationality: 'German' }
    : { country: 'Deutschland', code: 'DE', prefix: '49', nationality: 'Deutsch' }
  
  // 后续业务逻辑
}

4. 应用启动前等待i18n初始化完成 #

如果要从根源避免所有未初始化的取值问题，可以在入口文件等待i18n初始化完成后再渲染应用：

// src/index.js 入口文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import i18n from './i18n' // 你的i18n配置文件

i18n.init().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
})

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris