ReactJS中i18n.t无法正确解析值的问题排查

看起来你在React项目的国际化开发中遇到了i18n.t无法正确读取navigations.json里翻译值的问题，我来帮你梳理几个最可能的排查方向和解决办法：

1. 先修复navigations.json的语法错误 #

你提供的JSON文件末尾有个多余的逗号，这会直接导致JSON解析失败，i18n根本无法加载文件内容，自然只能显示原始键名：

{ 
  "sidenav.dashboard": "Dashboard", 
  "sidenav.profile": "Profile", 
  "sidenav.account": "Account",  // 这里的逗号是多余的！
} 

修改为正确的JSON格式：

{ 
  "sidenav.dashboard": "Dashboard", 
  "sidenav.profile": "Profile", 
  "sidenav.account": "Account"
} 

2. 确认i18n是否正确加载了navigations命名空间 #

要确保你的i18n初始化配置里，已经把navigations作为命名空间（namespace）正确注册并加载了对应的资源。以i18next为例，初始化代码应该类似这样：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import navigationsEN from './path/to/navigations.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        navigations: navigationsEN  // 将navigations作为en语言下的命名空间资源
      }
    },
    lng: 'en',
    ns: ['navigations'],  // 声明要使用的命名空间
    defaultNS: 'navigations',  // 默认命名空间设为它，调用时可省略前缀
    interpolation: {
      escapeValue: false // React已处理XSS，此处设为false
    }
  });

export default i18n;

如果默认命名空间不是navigations，调用i18n.t时要确保命名空间写法正确，比如i18n.t('navigations:sidenav.dashboard')或者i18n.t('sidenav.dashboard', { ns: 'navigations' })。

3. 避免在模块顶层直接调用i18n.t #

你现在在模块顶层直接生成driverItems数组，此时i18n可能还未完成初始化，导致i18n.t无法正确解析翻译值。

解决方法是把driverItems改成函数，等i18n初始化完成后再调用：

import i18n from '../../../i18n'

// 改为函数形式
export const getDriverItems = () => [
  { 
    link: '#', 
    icon: <Edit stroke="#ffffff" />, 
    text: i18n.t('navigations:sidenav.dashboard'), 
    open: false 
  },
  { 
    link: '#', 
    icon: <Edit stroke="#ffffff" />, 
    text: i18n.t('navigations:sidenav.profile'), 
    open: false 
  },
  { 
    link: '#', 
    icon: <Edit stroke="#ffffff" />, 
    text: i18n.t('navigations:sidenav.account'), 
    open: false 
  }
]

然后在React组件中，等组件挂载或i18n就绪后再获取数组：

import { getDriverItems } from './linksList'

// 类组件示例
class YourComponent extends React.Component {
  componentDidMount() {
    this.setState({ linksOwnerList: getDriverItems() })
  }

  render() {
    const items = this.state.linksOwnerList.map((item, index) => {
      // 你的渲染逻辑
    })
    return <div>{items}</div>
  }
}

// 函数组件示例
function YourComponent() {
  const [linksOwnerList, setLinksOwnerList] = useState([])

  useEffect(() => {
    setLinksOwnerList(getDriverItems())
  }, [i18n.language]) // 监听语言变化，实时更新翻译

  return (
    <>
      {linksOwnerList.map((item, index) => {
        // 你的渲染逻辑
      })}
    </>
  )
}

4. 验证翻译键的一致性 #

最后检查一遍：navigations.json里的键名和你调用i18n.t时用的键名完全一致吗？比如有没有大小写错误、多打/少打点符号的情况，这些细节很容易导致匹配失败。

按照这个顺序排查下来，应该能解决你遇到的问题。

内容的提问来源于stack exchange，提问作者Adam Boston Leone