useEffect無法更新狀態

我有一部分代碼加載了 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();

uj5u.com熱心網友回復：

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

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

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

uj5u.com熱心網友回復：

需要完成一些 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;

標籤：反应 反应原生 rxjs 反应钩子

上一篇：為什么當我按下可觸摸的不透明度時，它會給出物件無效的錯誤作為反應孩子

下一篇：有沒有辦法在領域中以正確的方式呈現One2ManyRelation？