在这种情况下，我如何正确地调用这个.setState()

Question

如何在这种上下文中正确调用this.setState((？

我在忘记密码屏幕中有以下功能

handleForgotPassword(){
if(!this.validateInputs()) return;
const {email} = this.state;
const auth = firebase.auth();
//const setState = this.setState;
auth.sendPasswordResetEmail(email).then(function() {
this.setState({passwordEmailSent:true});
}).catch(function(error) {
//alert(error.message);
let errorMessage;
if(error.message.includes('There is no user')){
errorMessage = 'No users match the provided email address';
this.setState({errorMessage});    
}
});
}

catch中的this.setState返回以下错误：

TypeError：this.setState不是函数

当发生错误时，我可以做些什么来正确地构建它，以便调用setState((？

=====更新=====

好吧，我对这个实现仍然有问题，所以我创建了一个带有精简实现的替代类来发布以供审查。当我尝试在提供的代码中使用这个.setState((时，当前返回的错误是：

TypeError:undefined不是对象(正在评估此.setState(

React中有不同的方法来管理"this"使用场景。根据一些谷歌搜索，React团队建议将函数绑定到构造函数中的"this"。我也喜欢这种方法，b/c它提供了一种清晰一致的方法。那么，你能澄清一下为什么这段代码目前认为这个.setState((是未定义的，以及我可以对代码进行哪些修改来解决这个问题吗？

以下代码：

import React from 'react';
import { Text, TextInput, View, Button } from 'react-native';
import firebase from 'react-native-firebase';
export default class ForgotPassword2 extends React.Component {
state = { email: '', errorMessage: null, passwordEmailSent:false }
constructor(props){
super(props);
this.validateInputs = this.validateInputs.bind(this);
this.handleForgotPassword = this.handleForgotPassword.bind(this);
}
validateInputs(){
const {email} = this.state;
if(email.length === 0){
this.setState({errorMessage:'Email is required'});
return false;
}
return true;
}
handleForgotPassword(){
alert('function called');
if(!this.validateInputs()) return;
const {email} = this.state;
const auth = firebase.auth();
auth.sendPasswordResetEmail(email).then(function() {
//this.setState({passwordEmailSent:true});
alert('pwd reset email sent');
}).catch(function(error) {
alert(error.message);
let errorMessage;
if(error.message.includes('There is no user')){
alert('no matching user');
errorMessage = 'No users match the provided email address';
this.setState({errorMessage});
}
});
}
render() {
return(
<View>
{this.state.errorMessage &&
<Text style={{ color: 'red' }}>
{this.state.errorMessage}
</Text>}
<TextInput
onChangeText={email => this.setState({ email })}
value={this.state.email}
/>
<Button onPress={this.handleForgotPassword} title="Send Email 2"></Button>
</View>
)
}
}

Answer 1

使用箭头函数，this将是组件类的上下文：

handleForgotPassword = () => {
if(!this.validateInputs()) return;
const {email} = this.state;
const auth = firebase.auth();
//const setState = this.setState;
auth.sendPasswordResetEmail(email).then(() => {
this.setState({passwordEmailSent:true});
}).catch((error) => {
//alert(error.message);
let errorMessage;
if(error.message.includes('There is no user')){
errorMessage = 'No users match the provided email address';
this.setState({errorMessage});    
}
});
}

不使用箭头功能的示例：

constructor(props) {
super(props);
this.handleForgotPassword = this.handleForgotPassword.bind(this);
}
handleForgotPassword(){
const context = this;
if(!context.validateInputs()) return;
const {email} = context.state;
const auth = firebase.auth();
//const setState = context.setState;
auth.sendPasswordResetEmail(email).then(function() {
context.setState({passwordEmailSent:true});
}).catch(function(error) {
//alert(error.message);
let errorMessage;
if(error.message.includes('There is no user')){
errorMessage = 'No users match the provided email address';
context.setState({errorMessage});    
}
});
}