Question

我正在尝试创建i18next实例。但是实例的值不同，因为它在React组件中失败

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const config = {
ns: ['translations'],
defaultNS: 'translations',
fallbackLng: 'en',
backend: {
    loadPath: 'locale/{{lng}}.json',
    addPath: '{{lng}}',
},
detection: {
    caches: null
},
debug: true,
react: {
    wait: true,
    withRef: false,
    interpolation: {
        escapeValue: false, // not needed for react!
    },
    bindI18n: 'languageChanged',
    bindStore: false,
    nsMode: 'default'
}
};
i18n.use(Backend)
.use(LanguageDetector)
.use(reactI18nextModule).init(i18nconfig);
console.log(i18n);
export default i18n;

提供结构而不是整个对象。我得到的值是：

    changeLanguage: (...)
cloneInstance: (...)
createInstance: (...)
default: I18n {observers: {…}, options: {…}, services: {…}, logger: Logger, modules: {…}, …}
dir: (...)
exists: (...)
getFixedT: (...)
init: (...)
loadLanguages: (...)
loadNamespaces: (...)
loadResources: (...)
off: (...)
on: (...)
setDefaultNamespace: (...)
t: (...)
use: (...)
get changeLanguage: ƒ ()
get cloneInstance: ƒ ()
get createInstance: ƒ ()
get dir: ƒ ()
get exists: ƒ ()
get getFixedT: ƒ ()
get init: ƒ ()
get loadLanguages: ƒ ()
get loadNamespaces: ƒ ()
get loadResources: ƒ ()
get off: ƒ ()
get on: ƒ ()
get setDefaultNamespace: ƒ ()
get t: ƒ ()
get use: ƒ ()
__proto__: Object

所需结果应为

addResource: ƒ ()
addResourceBundle: ƒ ()
addResources: ƒ ()
format: ƒ format(value, _format, lng)
getDataByLanguage: ƒ ()
getResource: ƒ ()
getResourceBundle: ƒ ()
hasResourceBundle: ƒ ()
isInitialized: true
language: "en-US"
languages: (2) ["en-US", "en"]
logger: Logger {prefix: "i18next:", logger: {…}, options: {…}, debug: true}
modules: {external: Array(0), backend: ƒ, languageDetector: ƒ}
observers: {initialized: Array(0), languageChanged: Array(28)}
options: {debug: true, initImmediate: true, ns: Array(1), defaultNS: "translations", fallbackLng: Array(1), …}
removeResourceBundle: ƒ ()
services: {logger: Logger, resourceStore: ResourceStore, languageUtils: LanguageUtil, pluralResolver: PluralResolver, interpolator: Interpolator, …}
store: ResourceStore {observers: {…}, data: {…}, options: {…}}
translator: Translator {observers: {…}, resourceStore: ResourceStore, languageUtils: LanguageUtil, pluralResolver: PluralResolver, interpolator: Interpolator, …}
__proto__: EventEmitter

如果我将I18n实例（第一个）通过I8nextProvider传递给我的react组件。我看到以下错误

backend.js:6 react-i18next:: You will need pass in an i18next instance either by props, using I18nextProvider or by using i18nextReactModule. Learn more https://react.i18next.com/components/overview#getting-the-i-18-n-function-into-the-flow 
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in Context.Consumer (created by WithMergedOptions(NamespacesConsumerComponent))
    in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in Context.Consumer (created by LoadNamespace(EstimateResultsView))
    in LoadNamespace(DemoComponent)

NamespacesConsumer.js:154 Uncaught TypeError: Cannot read property 'loadNamespaces' of undefined
    at NamespacesConsumerComponent.loadNamespaces (NamespacesConsumer.js:154)
    at NamespacesConsumerComponent.componentDidMount (NamespacesConsumer.js:72)
    at commitLifeCycles (react-dom.development.js:20049)
    at commitLayoutEffects (react-dom.development.js:22813)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at commitRootImpl (react-dom.development.js:22585)
    at unstable_runWithPriority (scheduler.development.js:643)
    at runWithPriority$2 (react-dom.development.js:11305)

使用的版本： i18next：13.1.5 react-i18next：9.0.10

Answer 1

您的配置变量名为config，但是您试图将其他变量传递给init(i18nconfig)。我没有看到i18nconfig定义在任何地方，所以我猜它正在加载默认值。

（尽管我很惊讶您没有看到Uncaught ReferenceError: i18nconfig is not defined。）

无法创建适当的i18next实例以使用它来响应组件

1 个答案: