undefined 不是函数 this.setState

IT技术 javascript reactjs firebase react-native firebase-authentication
2021-05-09 00:09:52

我创建了一个简单的登录页面,一旦按下按钮,就会执行这个函数:

login = (email, password, navigate) => {
  this.setState({ loginButtonPressed: true });
  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(function(user) {
      navigate('Profile');
    })
    .catch(function(error) {
      this.setState({ loginButtonPressed: false });
      Alert.alert(error.toString());
    });
};

一旦被调用,它就会执行“this.setState({ loginButtonPressed: true })”,因为按钮改变了形状(它被标记为按下)。但我收到以下错误:Undefined is not a function this.setState

如何解决这个问题?谢谢你的帮助。

4个回答

问题在于:

.catch(function(error) {
  this.setState({ loginButtonPressed: false });
  Alert.alert(error.toString());
});

您创建了一个匿名函数,其中this将引用此匿名函数(对象),而不是 React 对象。

我看到你可以使用箭头函数,所以修复它:

.catch((error) => {
  this.setState({ loginButtonPressed: false });
  Alert.alert(error.toString());
});

使用箭头函数this将引用使用它的上下文。

或者您可以保留对此引用的副本,如下所示:

const self = this; (函数中的第一行);

并在函数的任何地方使用“self”而不是“this”。

您可以在可能无法使用箭头函数的地方使用它。

您需要bindthis为了有回调的内部访问。用箭头函数试试。

你在扩展react组件吗?

如果不是,则需要这样做才能利用setState,如果是,则需要确保在构造函数中创建状态,然后再将其更新到setState其他地方。

类似的东西:

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loginButtonPressed: false };
    this.login = this.login.bind(this);
  }

  login(email, password, navigate) {
    this.setState({ loginButtonPressed: true });
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(function(user) {
        navigate('Profile');
      })
      .catch(function(error) {
        this.setState({ loginButtonPressed: false });
        Alert.alert(error.toString());
      });
  };

  render() {
    return (
      <Button onClick={this.logIn}>Login</Button>
    );
  }
}