Question

我创建了一个简单的登录页面，按下该按钮后，执行此功能：

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());
    });
};

一旦被调用，它就会执行＆＃34; this.setState（{loginButtonPressed：true}）＆＃34;因为按钮改变形状（它被标记为按下）。但是我收到以下错误：未定义不是函数this.setState 。

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

Answer 1

问题在于：

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

你创建了一个匿名函数，this将引用这个匿名函数（Object），而不是React对象。

我看到你可以使用箭头功能，所以修复如下：

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

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

Answer 2

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

const self = this; （函数的第一行）;

并使用＆＃34; self＆＃34;而不是＆＃34;这个＆＃34;功能中的任何地方。

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

Answer 3

您需要bind到this才能访问回调内容。尝试使用箭头功能。

Answer 4

您是否正在扩展反应组件？

如果您不是，则需要使用setState，如果您是，则需要确保在构造函数中创建状态，然后在其他位置使用setState进行更新。 / p>

有些事情：

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>
    );
  }
}

Answer 5

箭头功能会记住它的词法范围。请参阅MDN文档 - “箭头函数在全局上下文中执行时不会新定义自己的'this';而是使用封闭词汇上下文的'this'值，相当于将其视为闭包值。因此，在下面代码，传递给setInterval的函数中的'this'与封闭函数中的'this'具有相同的值：“ function Person（）{ this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Undefined不是this.setState的函数

5 个答案: