将 react-i18next 与 React 独立组件一起使用 - 'missingKey' 错误

Question

我从 i18next 收到“missingKey”错误消息，即使翻译似乎正在加载（可以查看控制台日志记录）。我在这里做错了什么？

这是我的 i18n.js 文件：

import i18n from 'i18next'
import i18nhttp from 'i18next-http-backend'
import Backend from 'i18next-chained-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

const options = {
  backends: [
    i18nhttp
  ],
    
  backendOptions: [
    { loadPath: '/api/constants/{{lng}}/{{ns}}.lang.json' }
  ]
}

i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({
  backend: options,
  ns: ['fin'],
  defaultNS: 'fin',
  fallbackNS: 'fin',
  fallbackLng: 'en',
  keySeparator: false,
  debug: true,
  detection: {
    order: ['queryString', 'cookie'],
    cache: ['cookie'],
    lookupCookie:'website#lang',
  },
  interpolation: {
    escapeValue: false
  },
  react: {
    useSuspense: true
  }
}, (err, t) => {
  if (err) return console.log('something went wrong loading', err);
  t('pinDescription') 
})

export default i18n

这是我的 React 组件文件：

import React, { Suspense }  from 'react'
import ReactDOM from 'react-dom'
import '../../../scripts/i18n'
import { useTranslation } from 'react-i18next'

  const Translation = () => {
    const { t, i18n } = useTranslation()
  
    return (
      <div className="translation-sample">
        <h2>Translation Sample - from files</h2>
        <p>{t('accountNumberDescription')}</p>
      </div>
    )
  }

  const domElement = document.getElementById('translation-sample')

  if (domElement) {
    ReactDOM.render(
      <React.StrictMode>
        <Suspense fallback={<div>Loading ... </div>}>
          <Translation />
        </Suspense>
      </React.StrictMode>,
      domElement
    );
  }

对于我尝试在 init 回调 (t('pinDescription')) 中呈现的翻译，我收到此错误：

i18next::translator: key "pinDescription" for languages "en" won't get resolved as namespace "fin" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

这很奇怪，因为 react-i81n 文档表明此回调在翻译加载后运行。

为此，对于我尝试在组件中呈现的键，我也会收到“缺少键”错误：

i18next::translator: missingKey en fin pinDescription pinDescription
i18next::translator: missingKey en fin accountDescription accountDescription

我尝试了几件事，包括：

1. 将 init 调用包装在一个 Promise 中，导出该函数并在组件中等待它
2. 使用 HOC 方法
3. 从 i18n.js 文件中导出 i18n 实例，然后将其导入组件中并调用 init（尝试了 awaiting 和 promise / then）

此外，如果我使用 Suspense 包装器组件，我会看到翻译已加载到控制台中（但是我仍然会丢失关键错误）。当我在 i81n.js 配置中删除“Suspense”并选择退出时，我从未在控制台中看到任何已加载翻译的指示。

我觉得我在这里遗漏了一些基本的东西。在组件中使用“t”之前等待初始化/翻译加载过程的最佳方法是什么？

我所做的与文档中的大多数示例之间的主要区别在于它们显示 i18n.js 被加载到 React 应用程序的 index.js 文件中。我没有任何 index.js 文件或 React 应用程序 - 我正在使用单个 React 组件，该组件稍后将被注入到现有的非 React 应用程序中。

此外，没有网络错误，我可以直接在浏览器中访问语言json文件没有问题，我可以在控制台中看到翻译加载。

来自浏览器控制台的输出（我在这里使用不同的命名空间，但代码相同）：

提前感谢您提供任何提示或指出我哪里出错了！

Answer 1

你错过了i18next provider

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import i18n from '../../../scripts/i18n';
import { useTranslation, I18nextProvider } from 'react-i18next';

const Translation = () => {
  const { t } = useTranslation();

  return (
    <div className="translation-sample">
      <h2>Translation Sample - from files</h2>
      <p>{t('accountNumberDescription')}</p>
    </div>
  );
};

const domElement = document.getElementById('translation-sample');

if (domElement) {
  ReactDOM.render(
    <React.StrictMode>
      <I18nextProvider i18n={i18n}> // <----
        <Suspense fallback={<div>Loading ... </div>}>
          <Translation />
        </Suspense>
      </I18nextProvider>
    </React.StrictMode>,
    domElement
  );
}