i18next 在异步内部更改语言导致内存泄漏

Question

我允许用户在应用程序中 select 一种语言，并将其存储在本地。当他们返回应用程序时，我尝试使用 AsyncStorage 来获取语言，但是当我调用

i18n.changeLanguage(currentLanguage)

它会导致内存泄漏。这是我的代码

const [language, setLanguage] = useState('') 
    const {t} = useTranslation();    
    const fetchLanguage =  async () =>{
        try{
            const currentLanguage = await AsyncStorage.getItem('language')
            if (currentLanguage === null ){
            }
            else{
                setLanguage (currentLanguage)
                i18n.changeLanguage(currentLanguage)
            }
        }catch (e){
            console.log(e)
        }
       
    }
    useEffect (()=>{
        fetchLanguage()
    }, [])

Answer 1

不要尝试在 useEffect 中使用 i18n.changeLanguage(currentLanguage)，而是在初始化 i18next 时使用语言检测器。然后你可以有一个错误返回 language.The 这个答案归功于 Hend El-Sahli 的答案 here

const initialLanguage = 'en'

const languageDetector = {
  init: Function.prototype,
  type: 'languageDetector',
  async: true,
  detect: async callback =>{
    const storeLanguage = await AsyncStorage.getItem("language")
    const selectedLanguage = storeLanguage || initialLanguage
    callback(selectedLanguage)
  },
  cacheUserLanguage: () =>{}
}


i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(languageDetector)
  .init({
    resources: resources,
    compatibilityJSON: 'v3',
    fallbackLng:'en',
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
});

export default i18n;

i18next 在异步内部更改语言导致内存泄漏

i18next change language inside async causes memory leak

memory-leaks

i18next

react-native

use-effect

use-state