Mobx Class не может прочитать свойство 'loading' из неопределенного

Question

Использовал create-реакции-приложение для создания приложения-реакции

Поэтому я использую mobx с реакцией и создал следующий класс:

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);
  }
}

Будет иметь тот же эффект.