IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Erreur : Too many re-renders


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2019
    Messages
    32
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2019
    Messages : 32
    Points : 21
    Points
    21
    Par défaut 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
    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

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    900
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 900
    Points : 1 289
    Points
    1 289
    Par défaut
    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
      }
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

Discussions similaires

  1. pb pour créer des index [too many keys]
    Par Issam dans le forum Débuter
    Réponses: 3
    Dernier message: 19/01/2005, 20h58
  2. Réponses: 4
    Dernier message: 29/09/2004, 09h05
  3. Too Many versions & Backup-Restore à rallonge
    Par Harry dans le forum Administration
    Réponses: 14
    Dernier message: 30/06/2004, 18h10
  4. [DDL] Too many versions
    Par TMuet dans le forum Débuter
    Réponses: 4
    Dernier message: 13/01/2004, 09h23
  5. Pgsql : erreur de connexion 'too many clients ...'
    Par petitmoosse dans le forum PostgreSQL
    Réponses: 3
    Dernier message: 21/08/2003, 14h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo