ReactNative State не меняется сразу, так как я могу исправить мою проблему?

Question

У меня есть проблема, связанная с setState () вactNative.

В модуле «login» мне нужно проверить в Firebase, связано ли «имя пользователя» с адресом электронной почты. Если это так, то пользователь аутентифицирован. Если нет, я предупреждаю: «имя пользователя не совпадает с адресом электронной почты.

Итак, в чем моя проблема? Когда имя пользователя не основано на электронном письме, оно работает и отображает диалоговое окно с предупреждением. имя пользователя совпадает с адресом электронной почты, оно работает , но оно все еще отображает предупреждение, когда я нажимаю кнопку "Соединитель".

Как мне исправить это в моем коде?

class ModalLogin extends React.Component {
state = {
email: '',
password: '',
pseudo: '',
items: [],
find: '',
iconEmail: require('../Images/icon-email.png'),
iconPassword: require('../Images/icon-password.png'),
iconName: require('../Images/name.png'),
isSuccessful: false,
isLoading: false,
scale: new Animated.Value(1),
translateY: new Animated.Value(0),
top: new Animated.Value(screenHeight),
};

handleLogin = () => {
const email = this.state.email;
const password = this.state.password;
const pseudo = this.state.pseudo;

if ((pseudo != '') & (email != '') & (password != '')) {
  let user_pseudo = firebase.database().ref('/users');

  user_pseudo.once('value').then(snapshot => {
    snapshot.forEach(el => {
      if (
        pseudo === el.val().username &&
        email.toLowerCase() === el.val().email
      ) {
        this.state.find = true;
        this.setState({find: true}, () => {
          this.setState({isLoading: true});
          firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .catch(error => {
              if (error.code === 'auth/user-not-found') {
                this.handleSingin().bind(this);
              } else Alert.alert('Error', error.message);
            })
            .then(response => {
              this.setState({isLoading: false});

              if (response) {
                // Successful
                this.setState({
                  isSuccessful: true,
                });
                //storage

                this.storeName(this.state.user);
                //this.fetchUser();
                this.props.updateName(this.state.user);

                setTimeout(() => {
                  Keyboard.dismiss();
                  this.props.closeLogin();
                  this.setState({
                    isSuccessful: false,
                  });
                }, 1000);
              }
            });
          this.setState({isLoading: false});
        });
      }
    });
  });



if (this.state.find == false) {
        Alert.alert('Le pseudo ne correspond pas à son adresse email !');
        // it means no username corresponds to this email address
      }
} else {
  console.log('erreur null');
  Alert.alert(
    'Error',
    "login/password don't match!",
  );
 }
};

Заранее спасибо !!

Answer 1

хорошо, это не проблема реагирования, просто javascript, так как эта

if (this.state.find == false) {
          Alert.alert('Le pseudo ne correspond pas à son adresse email !');
          // it means no username corresponds to this email address
        }

будет вызываться до snapshot.forEach (), весь код в функции .then () будет выполнен после завершения обещания. так что эта часть здесь

if (this.state.find == false) {
              Alert.alert('Le pseudo ne correspond pas à son adresse email !');
              // it means no username corresponds to this email address
            }

всегда будет называться, вы должны добавить ее вместо этого вот так

class ModalLogin extends React.Component {
  state = {
  email: '',
  password: '',
  pseudo: '',
  items: [],
  find: '',
  iconEmail: require('../Images/icon-email.png'),
  iconPassword: require('../Images/icon-password.png'),
  iconName: require('../Images/name.png'),
  isSuccessful: false,
  isLoading: false,
  scale: new Animated.Value(1),
  translateY: new Animated.Value(0),
  top: new Animated.Value(screenHeight),
  };

  handleLogin = () => {
  const email = this.state.email;
  const password = this.state.password;
  const pseudo = this.state.pseudo;

  if ((pseudo != '') & (email != '') & (password != '')) {
    let user_pseudo = firebase.database().ref('/users');

    user_pseudo.once('value').then(snapshot => {
      let find = false;
      snapshot.forEach(el => {
        if (
          pseudo === el.val().username &&
          email.toLowerCase() === el.val().email
        ) {
          find = true;
          this.setState({find: true}, () => {
            this.setState({isLoading: true});
            firebase
              .auth()
              .signInWithEmailAndPassword(email, password)
              .catch(error => {
                if (error.code === 'auth/user-not-found') {
                  this.handleSingin().bind(this);
                } else Alert.alert('Error', error.message);
              })
              .then(response => {
                this.setState({isLoading: false});

                if (response) {
                  // Successful
                  this.setState({
                    isSuccessful: true,
                  });
                  //storage

                  this.storeName(this.state.user);
                  //this.fetchUser();
                  this.props.updateName(this.state.user);

                  setTimeout(() => {
                    Keyboard.dismiss();
                    this.props.closeLogin();
                    this.setState({
                      isSuccessful: false,
                    });
                  }, 1000);
                }
              });
            this.setState({isLoading: false});
          });

        }

      });
      if (find == false) {
        Alert.alert('Le pseudo ne correspond pas à son adresse email !');
        // it means no username corresponds to this email address
      }
    });

  } else {
    console.log('erreur null');
    Alert.alert(
      'Error',
      "login/password don't match!",
    );
   }
  };

ps: я бы порекомендовал вам изучить больше javascript и поискать обещания