Question

我正在尝试使用firebase执行一些任务并在promise中调用一些函数而没有任何回调函数，这给了我一个错误。这是我的代码

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

在ES6中处理this上下文的3种方法。

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

在.then（）中调用函数会抛出错误

2 个答案: