React Native State 不会立即更改，所以我该怎么做才能解决我的问题？

Question

我在处理 reactNative 中的 setState() 时遇到问题。

在 "login" 模块中，如果 "username" 与电子邮件地址相关联，我需要在 Firebase 中进行检查。如果是这样，则用户已通过身份验证。如果没有，我会发出警告说“用户名与电子邮件不匹配。

那么，我的问题是什么？当用户名不依赖于电子邮件时，它会起作用并显示警告对话框。当用户名与电子邮件匹配时，它可以工作但是它仍然在我点击按钮"Connecter"时显示警告。

我该如何在我的代码中解决这个问题？

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() 函数中的整个代码将在 promise 完成后执行，所以这部分在这里

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 并搜索 promises

React Native State 不会立即更改，所以我该怎么做才能解决我的问题？

ReactNative State doesn't change immediately so how can I do to fix my problem?

setstate

reactjs

react-native

redux