组件被安装然后无理地被卸载

时间:2019-04-28 00:52:26

标签: react-native

我有一个密码更改表,如果用户按下发送到他的电子邮件的重置密码链接,则将其视为重置密码,如果从设置菜单访问该密码,则将其视为更改密码。 ,在我们关心的前一种情况下,限制用户使用以下代码浏览应用程序:

componentWillMount() {
    if (this.state.forgotPasswordForm === true) {
      BackHandler.addEventListener('hardwareBackPress', () => { return true; });
    }
}

每当用户填写新密码并按下调用此功能的“更新”按钮时,就会出现问题

updatePasswordButtonPress() {
    if (!(this.state.disable)) {
      if (this.state.New.length > 5) {
        if (this.state.forgotPasswordForm === true) {
          console.log('this.state.forgotPasswordForm = true');
          axios.put('/account/reset_password', {
            password: this.state.New,
          }, {
            headers: {
              CODE: this.state.resetPasswordCode
            }
          })
            .then((response) => {
              console.log('.then');
              ToastAndroid.show('password changed successfully', ToastAndroid.SHORT);
              return this.props.navigation.navigate('Login');
              console.log('after navigation');
            })
            .catch((error) => {
              console.log('.catch');
              ToastAndroid.show("error: password didn't change, try again later", ToastAndroid.SHORT);
            })
            .then(() => {
              console.log('.then number two');
              return this.props.navigation.navigate('Login');
              console.log('after navigation number two')
            });
        }
      }
    }
  }

我在前面的代码中尽可能多地在各个地方写了console.log()行,我还在console.log()和{{ 1}}的密码和登录表单

这是控制台日志输出:

componentDidMount()

即使在第一个componentWillUnmount()中注释了这两行之后,问题仍然存在

Password form DID mount
this.state.forgotPasswordForm = true
.then
Password form WILL unmount
Login form DID mount
.then number two
Login form WILL unmount
Password form DID mount

控制台日志输出:

.then()

发生的情况是,登录表单在挂载后即被卸载(不仅可以通过控制台日志通过肉眼观察到),还应该将其挂载,并且不重新安装密码表单。

0 个答案:

没有答案