[React Native] Need to tap two times

JavaScript
#1

Hi. First, sorry for my english. I’m french ^^’
I got a problem, I’m trying to authenticate a dabase via a REST API.
I make my request, all is okay, I get false or true, depends on the connect credentials.
But now, I use a button to connect, when I execute the function, I try to store the response in a state.
But, In my console, I see that I need to tap 2 times to have the good value.

Example : I enter a false password. It return false. Then, I change for the good password, it will return the first time “false” and if push the button a second time, it return true. Like if I get the response before it can finished to make his request. So, I get the last response he have.

I give you the code, maybe you could understand as well :

The button :

<TouchableOpacity style={styles.saveButton} onPress={() => {

              if (this.state.username.trim() === "") {
                this.setState(() => ({ usernameError: "Veuillez remplir ce champs." }));
              } else {
                this.setState(() => ({ usernameError: null }));

                if (this.state.password.trim() === "") {
                  this.setState(() => ({ passwordError: "Veuillez remplir ce champs." }));
                } else {
                  this.setState(() => ({ passwordError: null }));


                  try {
                    var ls = require('react-native-local-storage');
                    verifyPassword(this.state.username, this.state.password).then(() => {
                      ls.get('koustConnecting').then((data) => {
                                                    this.setState(() => ({ connectStatus: data }))
                                                  });
                    });

                    console.log("Valeur : ", this.state.connectStatus);
                  } catch (error) {
                    console.log("Error retrieving data" + error);
                  }


                }
              }
              }}>

The verifyPassword() function :

function verifyPassword(userid, password){
     return fetch('https://koustapp.com/apex/rest/oauth2/acces_mobile?userid='.concat(userid.toUpperCase()), {
        method: 'GET'
     })
     .then((response) => response.json())
     .then((responseJson) => {
        var ls = require('react-native-local-storage');
        var data = responseJson.items;

        var l_salt = "XV1MH24EHSS6XQ6QTJSANT3";
        var custom_hash = require('md5');

        try {
          var database_password = data[0].password;
          var crypted_password = custom_hash(password.concat(l_salt.substr(9,13), userid.toUpperCase(), l_salt.substr(3, 10))).toUpperCase();

          if(crypted_password === database_password){
            ls.save('koustConnecting', 'true');
          } else {
            ls.save('koustConnecting', 'false');
          }
        } catch (e) {
          console.log(e)
          return false;
        }

     })
     .catch((error) => {
        console.error(error);
     });

};

So yeah, I can’t understand why I need to do the action two times to have the good result…

Thanks !

#2

Update :

Find a solution but have a new problem :sleeping:

So, I make this :

async function connexion(username, entered_password){
  var ls = require('react-native-local-storage');

  var result = await verifyPassword(username, entered_password).then(() => {
    ls.get('koustConnecting').then((data) => {
                                  this.setState(() => ({ connectStatus: data }));
                                  console.log(this.state.data);
                                });
  });
}

That I call like that :

                  try {
                    connexion(this.state.username, this.state.password);
                  } catch (error) {
                    console.log("Error retrieving data" + error);
                  }

Buuuuut, I got this error :

[Unhandled promise rejection: TypeError: _this3.setState is not a function. (In '_this3.setState(function () {]
* class\Login.js:147:48 in <unknown>
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

So… I think it come from the using of Async…
An idea maybe ?

Thanks.

#3