javascript - Mobx类无法读取未定义的属性 'loading'

Question

使用create-react-app创建react-app

所以我将 mobx 与 React 结合使用并创建了以下类:

import { action, decorate, observable } from "mobx";

class AuthStore {
  loading = false;

  login() {
    console.log(this.loading);
  }
}

decorate(AuthStore, {
  loading: observable,
  login: action
});

export default AuthStore;

它说加载未定义，但我不知道为什么......

Answer 1

该错误并不是说 loading 未定义，而是说 this 未定义。

this 的值取决于调用 login 的上下文，而不是声明它的位置。我没有看到在类中调用 login，这意味着它不会引用类实例。

最简单的解决方案是将函数转换为使用词法范围的箭头语法(它将使用 this 来引用该类)。

login = () => {
  console.log(this.loading);
}

另一个不太简洁的解决方案是手动将 this 绑定(bind)到构造函数中的函数。

class AuthStore {
  constructor() {
    this.login = this.login.bind(this)
  }

  loading = false;

  login() {
    console.log(this.loading);
  }
}

它会产生相同的效果。