i18next 缺少钥匙，但找到了其他钥匙

Question

我什么都不懂了。

我使用 i18next 并想要访问我的密钥，但它不起作用。

i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile

这是我的翻译.json

{
  "app_name": "Test (NEW DE)",
  "profile": "ss"
}

这有效：

<Text>{ t('app_name') }</Text>

这不起作用：

<Text>{ t('profile') }</Text>

谁能解释一下为什么它不能正常工作？

i18下一个

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18next
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: false
    },
    fallbackLng: 'en',
    compatibilityJSON: 'v3',
    lng: 'de',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
    },
    interpolation: {
      escapeValue: false,
    },
    keySeparator: '.',
  });

export default i18next;

Answer 1

我怀疑，您太早调用 t 函数并且没有等待翻译完全加载。

如果您不使用悬念：

useSuspense: false

您需要确保检查就绪标志。

https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

// additional ready will state if translations are loaded or not
const { t, i18n, ready } = useTranslation('ns1');

https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

// use tReady prop in MyComponent to check if translations
// are already loaded or not
const ExtendedComponent = withTranslation()(MyComponent);
<ExtendedComponent />

Answer 2

这是因为键名中不能包含下划线。不能有任何特殊字符。名称必须采用驼峰命名法才能正常工作。

Answer 3

.init({
    fallbackLng: 'fa',
    debug: false,  // add this code 
  })