如何让i18next语言变更在React项目的工具文件中生效？

问题原因 #

你的steps数组是在模块初始化阶段就执行了t()函数计算出label的值，之后语言切换时，这个数组不会重新计算——工具文件本身没有React组件的渲染生命周期，无法自动响应语言变更，所以翻译内容始终是初始化时的结果。

解决方案 #

方案1：将steps改为动态函数（推荐） #

把固定数组改成返回数组的函数，在React组件中调用该函数获取最新翻译结果：

工具文件修改：

import { t } from 'i18next';
// 假设tasks、ApplicantInfo等依赖已正确导入

export const getSteps = () => [
  {
    label: t('common:steps.applicant_information'),
    value: 1,
    relatedTasks: [tasks.confirmPersonalDetails],
    component: ApplicantInfo
  },
  {
    label: t('common:steps.contacts'),
    value: 2,
    component: Contacts,
    relatedTasks: [tasks.confirmResponsibleParties]
  }
];

在React组件中使用：

import { getSteps } from './your-tool-file';

const YourComponent = () => {
  // 组件渲染时会调用getSteps，语言切换后组件重新渲染，会执行最新的t()
  const steps = getSteps();
  
  // ...你的渲染逻辑
};

方案2：在组件内使用useTranslation钩子生成steps #

如果steps仅在单个组件中使用，可直接在组件内借助react-i18next的useTranslation钩子生成：

import { useTranslation } from 'react-i18next';

const YourComponent = () => {
  const { t } = useTranslation();
  
  const steps = [
    {
      label: t('common:steps.applicant_information'),
      value: 1,
      relatedTasks: [tasks.confirmPersonalDetails],
      component: ApplicantInfo
    },
    {
      label: t('common:steps.contacts'),
      value: 2,
      component: Contacts,
      relatedTasks: [tasks.confirmResponsibleParties]
    }
  ];
  
  // ...你的渲染逻辑
};

方案3：监听语言变更手动更新（不推荐） #

通过i18next的语言变更事件手动更新steps，但需要额外维护可变状态，且React组件需监听steps变化才能更新：

工具文件修改：

import { t, i18next } from 'i18next';

export let steps = [
  {
    label: t('common:steps.applicant_information'),
    value: 1,
    relatedTasks: [tasks.confirmPersonalDetails],
    component: ApplicantInfo
  },
  {
    label: t('common:steps.contacts'),
    value: 2,
    component: Contacts,
    relatedTasks: [tasks.confirmResponsibleParties]
  }
];

// 监听语言切换事件，更新steps
i18next.on('languageChanged', () => {
  steps = [
    {
      label: t('common:steps.applicant_information'),
      value: 1,
      relatedTasks: [tasks.confirmPersonalDetails],
      component: ApplicantInfo
    },
    {
      label: t('common:steps.contacts'),
      value: 2,
      component: Contacts,
      relatedTasks: [tasks.confirmResponsibleParties]
    }
  ];
});

组件中使用时，需要用状态包裹steps以触发重新渲染：

import { useState, useEffect } from 'react';
import { steps } from './your-tool-file';

const YourComponent = () => {
  const [localSteps, setLocalSteps] = useState(steps);
  
  useEffect(() => {
    // 监听steps变化，更新本地状态
    setLocalSteps(steps);
  }, [steps]);
  
  // ...使用localSteps渲染
};

这种方式代码冗余且容易出错，仅在特殊场景下考虑使用。

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