Erreur : Too many re-renders
Bonjour,
j'essaye de faire une application reactNative avec un écran de connexion.
Si je suis connecté j'ai accès à mon application et si je ne le suis pas je suis dirigé vers une page de connexion.
le problème c'est que j'ai une erreur qui dit
Citation:
Too many re-renders. React limits the number of renders to prevent an infinite loop
il y a un endroit ou il y a une boucle mais je ne serais pas dire où.
Pouvez vous m'aider ?
Mon code :
DrawerNavigation
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
| import React,{useState} from 'react';
import { TextInput, TouchableOpacity, View, Text, StyleSheet,Button } from 'react-native';
import Section3 from '../screen/Section3'
import Section4 from '../screen/Section4'
import CustomDrawerContent from './DrawerContent/DrawerContent'
import {
createDrawerNavigator,
} from '@react-navigation/drawer';
import NavigationTab from './NavigationTab';
import Login from '../screen/Login';
import SplashScreen from '../screen/SplashScreen';
import AsyncStorage from '@react-native-async-storage/async-storage';
const Drawer=createDrawerNavigator();//Création de mon navigator
const DrawerNavigation = () => {
const [IsLoading,SetLoading] = useState(true);// IsLoading m'indique si je suis en train d'aller chercher des informations
const [IsLoged,SetLoged] = useState(LogedOrNot());//Isloged m'indique si je suis déjà connecté
async function getData () {//retourne la valeurs stocké
try {
const value = await AsyncStorage.getItem('@storage_Key')
console.log(value)
if(value !== null) {
}
return value;
} catch(e) {
// error reading value
}
}
function LogedOrNot () {// Si je suis connecté il y aura écrit LOGED si non il y aura écrit LOGOUT
let ok ='';
getData().then(res=>{
if(res='LOGED'){
ok = true;
}
else{
ok = false;
}
})
SetLoading(false);
return ok;
}
return (
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
{
IsLoading ? (//Si j'ai finit de récupérer mes information
<>
{
IsLoged ? (//Si l'utilisateur est connecté
<>
<Drawer.Screen name="Acceuil" component={NavigationTab}/>
<Drawer.Screen name="Section 3" component={Section3} />
<Drawer.Screen name="Section 4" component={Section4} />
</>
) : (//Si il ne l'est pas
<>
<Drawer.Screen name="Connexion" component={Login} />
</>
)
}
</>
) : (//écran de chargement
<>
<Drawer.Screen name="SplashScreen" component={SplashScreen} />
</>
)
}
</Drawer.Navigator>
);
}
export default DrawerNavigation |
LoginFunction:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| import React from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage';
const LoginContext = {
logIn: async () => {
try {
await AsyncStorage.setItem('@storage_Key','LOGED')
console.log('LOGED')
} catch (e) {
// saving error
}
},
logOut:async ()=>{
try {
await AsyncStorage.setItem('@storage_Key','LOGOUT')
console.log('LOGOUT')
} catch (e) {
// saving error
}
},
};
const FonctionLogContext= React.createContext(LoginContext);
export {LoginContext};
export default FonctionLogContext |
Merci beaucoup de votre aide