Discussion :

[L_layton]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gwyohm]

salurt
je pense que tu as un problème avec LogedOrNot : elle renvoie toujours '' car le changement de valeur de on se fait dans un then qui a lieu à priori après le return

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function LogedOrNot () {// Si je suis connecté il y aura écrit LOGED si non il y aura écrit LOGOUT
    let ok ='';
    getData().then(res=>{
// comme on est dans un then, il faut attendre le résultat de getData pour enter dans ce code
      if(res='LOGED'){
        ok = true;
      }
      else{
        ok = false;
      }
    })
    SetLoading(false);
    return ok; // le return est indépendant de la promesse
  }