未定義不是this.setState函數

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

一旦調用，它就會執行“ this.setState（{loginButtonPressed：true}）”，因為按鈕會改變形狀（標記為已按下）。 但是我收到以下錯誤： 未定義不是函數this.setState 。

如何解決？ 謝謝你的幫助。

Answer 1

問題在於：

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

您創建一個匿名函數， this函數將引用此匿名函數（對象），而不是React對象。

我看到您可以使用箭頭功能，因此請像這樣修復它：

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

帶箭頭的功能this將參考上下文中其被使用。

Answer 2

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

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

並在函數中的任何位置使用“自我”而不是“此”。

您可以在可能無法使用箭頭功能的地方使用它。

Answer 3

您需要bind this才能在回調內部進行訪問。 嘗試使用箭頭功能。

Answer 4

您是否正在擴展反應組件？

如果不是，則需要利用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>
    );
  }
}

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