时间戳

首页 > 解决方案 > Mobx 类无法读取未定义的属性“正在加载”

javascript - Mobx 类无法读取未定义的属性“正在加载”

问题描述

使用 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;

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

标签： javascriptreactjsmobx

解决方案

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

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

最简单的解决方案是将函数转换为使用词法范围的箭头语法（它将具有this引用类）。

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

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

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

  loading = false;

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

它会产生同样的效果。

推荐阅读