为什么我的翻译不适用于 react-i18next？

Question

这是我的配置文件：

i18n.js：

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import detector from "i18next-browser-languagedetector";
import { initReactI18next } from 'react-i18next';

const fallbc = ['en'];
const langArr = ['en', 'de'];

i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    });

export default i18n;

当我尝试这个时：

import i18n from '../i18n';

return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

只呈现英语，德语不呈现。我究竟做错了什么？

我的配置有问题吗？我觉得我真的很接近解决这个问题了。

Answer 1

i18n.Init 是一个延迟加载函数你必须等待callback 必须被调用。否则使用 SyncBackend。否则启动应用程序懒惰。

示例：

import i18next from 'i18next';
import SyncBackend from 'i18next-sync-fs-backend';


// working
i18next
  .use(SyncBackend)
  .init({ initImmediate: false });

i18next.t('key'); // -> will return value

延迟启动：

export default (callback) => {
const instance = i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    },() => callback(instance));
};

import i18nInit from '../i18n';

i18nInit((i18n) =>{
// lazy start here
return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

})

更多： https://www.i18next.com/overview/configuration-options