使用效果无法更新状态

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

IfuseEffect使用useFocusEffect

import { useFocusEffect } from '@react-navigation/native';
function App(props){
/* your code here */
useFocusEffect(
React.useCallback(() => {
// your code here
}, [])
);
/* your code here */
}

编辑:你需要在函数组件的内部调用useFocusEffect

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;