useEffect 无法更新状态

Question

我有一部分代码加载了 i18n 的存储语言。 我正在尝试获取语言，将状态更改为 true，然后在屏幕上显示页面。

代码没有更新“yesLanguage”状态，它仍然返回 false..

代码必须返回 TRUE“yesLanguage”。

代码的目标是在显示屏幕之前设置应用程序的默认语言，然后以默认语言（用户最近设置的语言）显示屏幕。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
/*
 import React from 'react';
 import {Text} from 'react-native';

  //import {SignUpScreen} from './src/components/PlayAround/ResponsiveLayout';
  import {HomeScreen} from './src/screens/HomeScreen';
 
 
  function App (props){
    return(
      <HomeScreen />
    );
  }
  
  
  
  export default App;
  */

import React,{useState,useEffect} from 'react';
import  './translations/i18n';
import {View, Text,Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {HomeScreen} from './src/screens/HomeScreen';
import 'intl-pluralrules';



function App(props){


const {t, i18n} = useTranslation();
const [currentLanguage,setLanguage] = useState('ar');
const [yesLanguage , setYesLanguage] = useState(false);





const changeLanguage = value => {
    
    
    i18n
    .changeLanguage(value)
    .then(() => setLanguage(value))
    .catch(err => console.log(err));
    AsyncStorage.setItem('currentLnaguage',value);
    
};


React.useEffect(()=>{
    AsyncStorage.getItem('currentLnaguage').then(val => {
        
        //console.log(val+'useeee2');
        let newDefaultLang = val ? val :"ar"; // or Change ar with the default language
        i18n.locale = newDefaultLang;
        changeLanguage(newDefaultLang);
        //
        setYesLanguage(true);
        console.log(newDefaultLang+"qqqq");
    });
    
},[]);

console.log(yesLanguage);
//AsyncStorage.clear();
return yesLanguage && <HomeScreen buttonTitle={t('ordernow')} deliveryText={t('delivery')} />

};

export default App;

更新 这是我的 i18n 文件代码

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
//import LanguageDetector from 'i18next-browser-languagedetector';
import en from './en/en.json';
import ar from './ar/ar.json';
import he from './he/he.json';
import AsyncStorage from '@react-native-async-storage/async-storage';
import React from 'react';


/*
i18n
.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: en,
    ar: ar,
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});*/


const getDefaultLang = async () => {

  
  
  const storedLang = await AsyncStorage.getItem('currentLnaguage');
  
  
  /*if(storedLang!= null){
    i18n.defaultLocale = storedLang;
    i18n.locale = storedLang;
    i18n.fallbacks = true;
  }*/

  

  return i18n
    .use(initReactI18next) 
    .init({
      resources: {
        en: en,
        ar: ar,
        he: he
      },
      lng: storedLang ? storedLang : 'ar', 
      //lng: storedLang || "ar",
      interpolation: {
        escapeValue: false, 
      },

      fallbackLng: ['en', 'ar','he'],
    });
};

export default getDefaultLang();

Answer 1

如果 useEffect 不起作用，请使用 useFocusEffect

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
        React.useCallback(() => {
            // your code here
        }, [])
    );

Answer 2

需要进行一些 useEffect 依赖项更改，它会像魅力一样工作。

看看下面的代码有什么变化，让我知道它是否有效。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React,{useState,useEffect} from 'react';
import  './translations/i18n';
import {useTranslation} from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {HomeScreen} from './src/screens/HomeScreen';
import 'intl-pluralrules';

function App(props){

    const {t, i18n} = useTranslation();
    const [currentLanguage,setLanguage] = useState('ar');
    const [yesLanguage , setYesLanguage] = useState(false);

    const changeLanguage = React.useCallback(async value => {
        i18n
        .changeLanguage(value)
        .then(() => setLanguage(value))
        .catch(err => console.log(err));
        await AsyncStorage.setItem('currentLnaguage',value);
    }, []);

    React.useEffect(()=>{
        AsyncStorage
        .getItem('currentLnaguage')
        .then(val => {
            let newDefaultLang = val ? val :"ar"; // or Change ar with the default language
            i18n.locale = newDefaultLang;
            changeLanguage(newDefaultLang);
            setYesLanguage(true);
            console.log(newDefaultLang+"qqqq");
        });
    },[changeLanguage]);

    console.log(yesLanguage);
    return yesLanguage && <HomeScreen buttonTitle={t('ordernow')} deliveryText={t('delivery')} />
};

export default App;