使用React -i18 React和React独立组件-“missingKey”错误
使用React -i18 React和React独立组件-“missingKey”错误
提问于 2021-01-10 10:20:23
即使翻译看起来是加载的(可以看到控制台日志)，我还是从i18next获得了‘i18next’错误消息。我在这里做错什么了？
这是我的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!!!这很奇怪，因为Response-i81n文档表明这个回调是在翻译加载之后运行的。
对于这个和我试图在组件中呈现的键，我还得到了“缺少键”错误：
i18next::translator: missingKey en fin pinDescription pinDescription
i18next::translator: missingKey en fin accountDescription accountDescription我尝试过几件事，包括：
将init调用封装在一个承诺中，导出该函数并在component
- Using中等待它--从i18n.js文件中的自组织method
- Exporting i18n实例中等待它，然后在组件中导入它并调用init (尝试了等待和承诺/然后)
此外，如果我使用悬念包装器组件，我会看到翻译已经加载在控制台中(但是我仍然会丢失关键错误)。当我删除“悬念”并在i81n.js配置中选择退出时，我在控制台中看不到任何显示翻译已经加载的指示。
我觉得我错过了一些最基本的东西。在组件中使用't‘之前，等待init /转换加载过程的最佳方法是什么？
我所做的工作与文档中的大多数示例所显示的主要区别在于，它们显示了将i18n.js加载到React应用程序的index.js文件中。我没有任何index.js文件或React应用程序--我正在使用一个单独的React组件，这些组件稍后将被注入到现有的非反应性应用程序中。
此外，没有网络错误，我可以直接访问浏览器中的语言json文件，没有问题，我可以看到在控制台中加载的翻译。
来自浏览器控制台的输出(这里使用的是不同的名称空间，但代码是相同的)：
谢谢你给我任何提示，或者指出我哪里出了问题！
回答 1
Stack Overflow用户
发布于 2021-01-10 10:36:26
你错过了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
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65652176
复制相关文章
相似问题
腾讯云开发者
