Вызов функции внутри .then () вызывает ошибку

Question

Я пытаюсь выполнить какую-то задачу с помощью firebase и вызываю некоторые функции внутри обещания без какой-либо функции обратного вызова, и это дает мне ошибку.Вот мой код

onButtonPress = () => {
  const {email, password} = this.state
  this.setState({error: '', loading: true});

  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(this.onAuthSuccess().bind(this))
  .catch(()=>{
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(this.onAuthSuccess().bind(this))
    .catch(this.onAuthFailed().bind(this))
  })
}

  onAuthSuccess() {
    this.setState({
      email: '',
      password: '',
      error: '',
      loading: false
    })
  }

  onAuthFailed() {
    this.setState({
      error: "Authentication Failed",
      loading: false
    })
  }

Вот сообщение об ошибке, которое я получаю

undefined не является объектом (оценивается _this.onAuthSuccess (). Bind () ')

Answer 1

3 способа работы с this контекстом в ES6.

1. Использование ключевого слова bind

onAuthSuccess() {
    ...
}

firebase.auth()
    .then(this.onAuthSuccess.bind(this));
    .catch(this.onAuthFailed.bind(this));
}

Используйте функцию стрелки, чтобы избежать предварительной привязки

onAuthSuccess = () => {
    ...
}

firebase.auth()
    .then(this.onAuthSuccess);
    .catch(this.onAuthFailed);
}

Свяжите ваши методы в конструкторе

constructor(props) {
    super(props);
    this.onAuthSuccess = this.onAuthSuccess.bind(this);
}

Answer 2

Не 100%, так как хороший старый this контекст сбивает с толку!

поэтому я думаю, что вы хотите избавиться от bind() и вместо этого использовать => в своих функциях.Использование жирных стрелок приведет к сбросу контекста this, поэтому this.setState должно быть правильным в контексте вашего компонента на основе классов.

Вот пример того, что я имею в виду

onAuthSuccess = () => {
  this.setState({
    email: "",
    password: "",
    error: "",
    loading: false
  });
};

onAuthFailed = () => {
  this.setState({
    error: "Authentication Failed",
    loading: false
  });
};

onButtonPress = () => {
  const { email, password } = this.state;
  this.setState({ error: "", loading: true });

   firebase
  .auth()
  .signInWithEmailAndPassword(email, password)
  .then(() => this.onAuthSuccess())
  .catch(() => {
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(() => this.onAuthSuccess())
      .catch(() => this.onAuthFailed());
  });
};