错误反应警报 bootstrap

Question

我想在 API 返回 401 时在组件中显示一条错误消息。我正在尝试使用不受任何约束的状态，并且正在使用 ES6。我得到

Cannot read property 'setState' of undefined

这是登录函数：

login(e) {
    e.preventDefault();
    AuthService.login(this.state.username, this.state.password)
    .catch(function (err) {
        console.log(err);
        this.setState({loginFailed: true});
    });
}

Answer 1

在 promise 解析内部，您正在失去外部对象的 this 范围，并且处于 promise 的上下文中。

由于您使用的是 ES6，因此可以使用粗箭头将外部的 this 绑定到函数的内部。

login(e) {
    e.preventDefault();
    AuthService.login(this.state.username, this.state.password)
    .catch((err) => {
        console.log(err);
        this.setState({loginFailed: true});
    });
}

Answer 2

如果您使用的是 ES6，我同意 DVG 的回答是最好的。

不过，您也可以这样做。

login(e) {
  e.preventDefault();

  var self = this;

  AuthService.login(this.state.username, this.state.password)
  .catch((err) => {
    console.log(err);
    self.setState({loginFailed: true});
  });
}

错误反应警报 bootstrap

Alert on error react bootstrap

javascript

reactjs

react-bootstrap