我有一个密码更改表,如果用户按下发送到他的电子邮件的重置密码链接,则将其视为重置密码,如果从设置菜单访问该密码,则将其视为更改密码。 ,在我们关心的前一种情况下,限制用户使用以下代码浏览应用程序:
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()
发生的情况是,登录表单在挂载后即被卸载(不仅可以通过控制台日志通过肉眼观察到),还应该将其挂载,并且不重新安装密码表单。