onChangeVariable exécuté que la 2eme fois (Fetch)

**hmscompagnie** · 09/11/2021, 14h10

Bonjour,
Je travaille sur une application en React Native.

Pour le formulaire d'enregistrement de nouveau compte, je souhaite vérifier que le nouveau Login n'est pas déjà présent en base de données. J'utilise un Fetch pour récupérer un tableau avec les Logins présents en bdd.
Je parcours le tableau avec un for, et avec un if je modifie la variable Result de "déjà utilisé" à "disponible". J'utilise un composant fonctionnel et un hook d'état.
J'affiche ensuite en console la valeur de résultat.
Tout cela est déclenché par une pression sur un bouton.

Tout cela fonctionne très bien, sauf que ... seulement la deuxième fois. Chaque fois que je change la valeur du Login (soit en dur, soit avec un textImput), l'état précédant s'affiche.

Supposons que par défaut, Result vaut "déjà utilisé", je rentre un Login non présent en bdd. La console affiche "déjà utilisé" à la première pression, puis "disponible" à la deuxième. Même comportement dans l'autre sens.

Voici des extraits de code :

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
 
const SigninForm = ({ navigation: { navigate } }) => {
(...)
 
const [Login, onChangeLogin] = React.useState("");
const [Result, onChangeResult] = React.useState("déjà utilisé");
 
(...)
<View style={styles.main_container}>
        <TextInput style={styles.textinput}
        onChangeText={onChangeLogin}
        value={Login}
        placeholder="Entrer votre identifiant"
         />
      </View>
 
(...)
 
<Button title="Soumettre" onPress={() => {
 
        fetch(url+queryCheck)
        .then(function(res) {
          if (res.ok) {
            return res.json()
          }
        })
        .then(function(value) {
          var cpt = 0
 
          for (var i in value) {
            if(value[i].Login != Login) {
              //console.log(value[i].Login+" = " + Login)
              cpt++
            }
          }
          //console.log("cpt =" + cpt, "tab = " + (value.length))
          if (cpt == value.length) {
 
              onChangeResult("disponible")
          }
          else {
 
              onChangeResult("déjà utilisé")
          }
            console.log(Result)
        })
        .catch(function(err) {
          console.log(err);
        })
 
      }
}/>
(...)

J'ai déjà remarqué ce comportement dans un fetch où je voulais inclure une redirection (navigate("Login")) une fois la requête exécutée.

Si quelqu'un sait comment arranger ça. Merci.

**gwyohm** · 10/11/2021, 20h05

Ton souci, c'est que tu logs Result, qui est géré par useState.
Quand tu fais

Code :

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

onChangeResult("disponible")

, Result ne change pas immédiatement (d'ailleurs c'est une constante, il ne peut pas changer), tu indiques à React que tu veux changer la valeur de ton state, mais ca ne sera refléter dans ton code que lorsque ton composant se mettre à jour (notamment pcq tu as demandé à modifier le state), et que ton composant fonction va se ré-exécuter

Au delà de ta question, je trouve la solution technique très étrange. L'api devrait renvoyer si un login est disponible, mais renvoyer tous les logins, ca ne peut que te poser des pbs par la suite. Si tu maitrises le back-end, je trouverai plus logique que ce soit lui qui cherche si le login est disponible.
Si tu ne le maitrises pas, et que tu es obligé de chercher coté client, tu peux faire beaucoup plus simple aussi:

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
<Button title="Soumettre" onPress={() => {
 
        fetch(url+queryCheck)
        .then(function(res) {
          if (res.ok) {
            return res.json()
          }
        })
        .then(function(value) {
         const alreadyUsed = (value.map(({Login: login } = {}) => login).includes(Login);
         // ou bien
         const alreadyUsed = value.findIndex(({ Login: login } = {}) => login === Login) !== -1;
         // ou au moins faire un break dès qu'il existe 
         let alreadyExists = false;
          for (var i in value) {
            if(value[i].Login == Login) {
              //console.log(value[i].Login+" = " + Login)
              alreadyExists = true;
             break;
            }
          }
          //console.log("cpt =" + cpt, "tab = " + (value.length))
          if (alreadyUsed) {
            onChangeResult("déjà utilisé")
 
          }
          else {
           onChangeResult("disponible")
          }
            console.log(Result)
        })
        .catch(function(err) {
          console.log(err);
        })
 
      }
}/>