React中使用i18next无刷新切换语言时动态内容不更新问题

我正在开发一个React项目，用i18next实现了语言切换功能。原来的切换器需要刷新页面才能生效，改成无刷新切换后，发现组件里通过useTranslation翻译的静态内容能正常更新，但动态生成的内容（比如从后端获取数据后通过t函数翻译的部分）无法随语言变化更新。

原有代码情况 #

带页面刷新的LanguageSwitch组件（可正常工作） #

export default function LanguageSwitch() {
  const { i18n } = useTranslation();
  const [language, setLanguage] = useState(localStorage.getItem('lang') ?? 'en');

  function handleLangChange(lang: Key) {
    localStorage.setItem('lang', lang.toString())
    window.onload = function() {
      i18n.changeLanguage(lang.toString())
        .then(() => {
          setLanguage(lang.toString());
        })
        .catch((error) => {
          console.error('Error changing language:', error);
        });
    };
    window.location.reload();
  }

  return (
    <Dropdown aria-label='Language change switch'
              className={'language-switch'}
              onSelectionChange={handleLangChange}
              defaultSelectedKey={language}
              items={SUPPORTED_LANGUAGES}>
      {item =>
        <Item key={item.code}>{item.name}</Item>
      }
    </Dropdown>
  )
}

修改后的无刷新handleLangChange方法（动态内容失效） #

function handleLangChange(lang: Key) {
    localStorage.setItem('lang', lang.toString())
    i18n.changeLanguage(lang.toString())
      .then(() => {
        setLanguage(lang.toString());
      })
      .catch((error) => {
        console.error('Error changing language:', error);
      });
  }

示例组件Configurations #

const Configurations = () => {
  const { t } = useTranslation();
  const [language, setLanguage] = useState(localStorage.getItem('lang') || 'en');
  const [configurations, setConfigurations] = useState([]);

  // 模拟API请求获取配置数据
  useEffect(() => {
    // 模拟配置数据
    const data = [
      { id: 1, type: 'foo' },
      { id: 2, type: 'bar' },
    ];
    setConfigurations(data);
  }, [language]); // 语言变化时触发数据获取

  return (
    <div>
      <h1>{t('Welcome')}</h1> - 静态数据无需刷新即可正确翻译
      <ul>
        {configurations.map((config) => (
          <li key={config.id}>
            {config.id}: {t(`TYPE_${config.type.toUpperCase()}.text`)} - 后端返回的动态数据无法随语言变化更新
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Configurations;

注意：LanguageSwitch是全局Header组件的一部分，所有页面都会加载该Header

解决方案 #

1. 移除组件内冗余的language状态 #

不需要在每个组件中单独维护language状态，直接依赖i18n实例的语言状态即可，它会自动同步语言变化。

修改后的Configurations组件：

const Configurations = () => {
  const { t, i18n } = useTranslation();
  const [configurations, setConfigurations] = useState([]);

  // 监听i18n实例的语言变化，触发数据更新
  useEffect(() => {
    // 实际场景中可根据当前语言请求对应数据
    const data = [
      { id: 1, type: 'foo' },
      { id: 2, type: 'bar' },
    ];
    setConfigurations(data);
  }, [i18n.language]);

  return (
    <div>
      <h1>{t('Welcome')}</h1> - 静态数据无需刷新即可正确翻译
      <ul>
        {configurations.map((config) => (
          <li key={config.id}>
            {config.id}: {t(`TYPE_${config.type.toUpperCase()}.text`)} - 动态数据现在可随语言变化更新
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Configurations;

2. 简化LanguageSwitch组件逻辑 #

去掉无刷新场景下多余的window.onload和页面刷新逻辑，直接依赖i18n实例的当前语言：

export default function LanguageSwitch() {
  const { i18n } = useTranslation();
  // 直接从i18n实例获取当前语言，无需手动维护状态
  const currentLanguage = i18n.language;

  function handleLangChange(lang: Key) {
    localStorage.setItem('lang', lang.toString());
    i18n.changeLanguage(lang.toString())
      .catch((error) => {
        console.error('切换语言出错:', error);
      });
  }

  return (
    <Dropdown 
      aria-label='语言切换器'
      className={'language-switch'}
      onSelectionChange={handleLangChange}
      defaultSelectedKey={currentLanguage}
      items={SUPPORTED_LANGUAGES}
    >
      {item => <Item key={item.code}>{item.name}</Item>}
    </Dropdown>
  );
}

3. 确保i18n初始化时读取缓存语言 #

在i18n初始化文件中，直接从localStorage读取默认语言，避免组件初始化时语言不一致：

// i18n.ts 初始化示例
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 从缓存读取默认语言
const storedLang = localStorage.getItem('lang') || 'en';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translations: require('./locales/en.json') },
      zh: { translations: require('./locales/zh.json') }
    },
    lng: storedLang,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    defaultNS: 'translations'
  });

export default i18n;

关键原理 #

• useTranslation返回的t函数会自动订阅i18n实例的语言变化事件，语言切换时所有使用t的组件都会自动重渲染。
• 之前的问题核心是组件内维护了独立的language状态，该状态未与i18n实例同步，导致依赖此状态的逻辑无法响应语言变化；改用i18n.language作为依赖，能确保语言切换时触发对应的数据更新和组件重渲染。

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