在 React 中设置 i18next 我做错了什么？出现 "i18next::translator: missingKey" 错误

Question

在我的src文件夹中，我创建了一个名为i18n的文件夹，它包含这三个文件

en.json
es.json
pl.json

这是他们的样子：

{
  "selectAction": "Select Action",
  "workflow": "Workflow",
  "details": "Details"
}

在 src 文件夹中，我还添加了这个名为 i18n.js

的文件

import i18n from 'i18next'
import LanguageDetector from "i18next-browser-languagedetector"
import { initReactI18next } from 'react-i18next'
// import Backend from "i18next-xhr-backend";
// import XHR from 'i18next-xhr-backend'
import languageEn from './i18n/en.json'
import languageEs from './i18n/es.json'
import languagePl from './i18n/pl.json'

i18n
  // .use(Backend)
  // .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: languageEn,
      es: languageEs,
      pl: languagePl
    },
    lng: "es",
    fallbackLng: "en",
    debug: true,
    keySeparator: ".",
    interpolation: {
      escapeValue: false,
    }
  });

console.log(i18n.languages)

export default i18n;

我在 src 根目录下的 index.js 文件如下所示：

// import statements are omitted, but I am importing I18NextProvider and i18n
ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>
  document.getElementById('root')
);

最后，在我的应用程序的某处，我有这个：

// Other imports omitted
import { useTranslation } from 'react-i18next';

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

  return (
     <h4 className="zero-state-section-text">{t('selectAction')}</h4>
  );
};

export default DetailsPlaceholder;

当我尝试加载页面时，我看到键 'selectAction' 作为文本（而不是真正的文本），并且记录了这个错误：

i18next::translator: missingKey es translation selectAction selectAction

Answer 1

所有资源文件都应将字符串存储在 translation 键下（如 quick start for react-i18next）：

{
  "translation": {
    "selectAction": "Select Action",
    "workflow": "Workflow",
    "details": "Details"
  }
}

这是一个具有重现错误和固定配置的存储库：
https://github.com/terales/reproduce-react-i18next-missingkey-error

在 React 中设置 i18next 我做错了什么？出现 "i18next::translator: missingKey" 错误

What am I doing wrong with setting up i18next in React? Getting a "i18next::translator: missingKey" error

internationalization

i18next

reactjs