使用 i18next 在 React 中无需重新加载翻译动态数据的问题

Question

我正在开发一个 React 项目，我使用 i18next 实现了语言切换。语言切换器工作正常并更改语言，需要重新加载页面。但是，我希望它能够在重新加载的情况下工作，并且在将语言切换为无需重新加载的情况下工作后，我面临着一个问题，即当语言更改时，组件中的动态翻译内容不会更新。使用 useTranslation 翻译的静态内容会正确更新，但我的组件中动态生成的内容不会正确更新。

所以我的 LanguageSwtich 可以在重新加载后正常工作。

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>
  )
}

我将句柄方法更改为不重新加载页面，并且我的动态数据现在无法翻译

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);
      });
  }

这是代码示例

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

  // Simulated API call to fetch configurations
  useEffect(() => {
    // Simulated configurations data
    const data = [
      { id: 1, type: 'foo' },
      { id: 2, type: 'bar' },
    ];
    setConfigurations(data);
  }, [language]); // Trigger fetch data when language changes

  return (
    <div>
      <h1>{t('Welcome')}</h1> - static data is translated correctly without reload
      <ul>
        {configurations.map((config) => (
          <li key={config.id}>
            {config.id}: {t(`TYPE_${config.type.toUpperCase()}.text`)} - dynamic data from the backend and using in the method are not translated without reload.
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Configurations;

注意：LanguageSwitch 是另一个标头组件的一部分，它在每个组件中用作标头中的按钮

我正在考虑在不重新加载的情况下渲染应用程序，但我不确定如何实现这一点

Answer 1

您只需要使用信号来让变量在组件之间更新状态

export const languageChanged = signal(false);

然后更新方法

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