React Native State 不会立即改变，所以我该如何解决我的问题？答案

【问题标题】：ReactNative State doesn't change immediately so how can I do to fix my problem?React Native State 不会立即改变，所以我该如何解决我的问题？
【发布时间】：2020-04-25 11:55:30
【问题描述】：

我有一个问题要处理 reactNative 中的 setState()。

在“登录”模块中，如果“用户名”与电子邮件地址相关联，我需要检查 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!",
  );
 }
};

提前谢谢你！！

【问题讨论】：

标签： reactjs react-native redux setstate

【解决方案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 的内容

【讨论】：