如何在React中设置i18n默认翻译语言

Question

我有两个翻译在我的应用程序使用i18n翻译，我试图没有成功设置默认语言。

首选语言(默认语言)将在注册时设置，并将来自数据库。

我在哪里可以创建某种逻辑来告诉i18n来自后端的语言是什么?

该值将显示如下:

const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'

i18n配置文件看起来像这样:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const Languages = ['en', 'de'];
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
whitelist: Languages,
interpolation: {
escapeValue: false
}
});

export default i18n;

应该写在.use(Backend)下面吗?这是第一次使用i18n，所以任何提示都会很感激。

这是我需要翻译的组件。在其中，我尝试根据首选语言设置i18n.languages的索引，但这不起作用:

import React from 'react'
import { useTranslation } from 'react-i18next';

export default function Dashboard() {
//the logged user
const currentUser = AuthService.getCurrentUser();
//value from database
const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'
//translation
const { t, i18n } = useTranslation();
function handleClick(lang) {
i18n.changeLanguage(lang);
}
const current = i18n.languages[defaultLang === 'en' ? 0 : 1]

return (
<>
<div className={styles.languageSelector}>
<a 
onClick={ () => handleClick('en') }
style={{ fontWeight: current === "en" ? 800 : 400}}
>
EN
</a>
<a 
onClick={ () => handleClick('de') }
style={{ fontWeight: current === "de" ? 800 : 400}}
>    
DE
</a>
</div>
<div>{t('translated.stuff')}</div>
</>
)
}

Answer 1

您可以通过在。init()中添加lng: 'en'来实现

.init({
fallbackLng: 'en',
lng: 'en', // default language
debug: true,
whitelist: Languages,
interpolation: {
escapeValue: false
}
});

https://www.i18next.com/overview/configuration-options

Answer 2

我认为您需要一个钩子来呈现语言更改时的页面。所以你可以把它添加到你的dashboard。jsx:

React.useEffect(() => {
const handleLanguageChange = () => {
// Refresh your component, maybe use a hook for it.
};
i18next.on("languageChanged", handleLanguageChange);
return () => {
i18next.off("languageChanged", handleLanguageChange);
};
}, []);

对于刷新逻辑，您可以添加一个计数器，该计数器在语言更改时增加，这应该足以启动组件的呈现。

Answer 3

我已经通过使用useEffect解决了这个问题。

//set the language from database
useEffect(() => {
i18n.changeLanguage(currentUser.data.laiso);
}, []);

就是这样，由于

Answer 4

在i18n.init({})之前。添加

if (!localStorage.getItem('i18nextLng')) {
localStorage.setItem('i18nextLng', 'ar');
}