Mobx 類無法讀取未定義的屬性“加載”

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綁定到構造函數中的函數。

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

  loading = false;

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

它會產生同樣的效果。