Почему toJS () возвращает пустой объект при применении к наблюдаемому объекту?- MobX

Question

Я получаю пустой объект, когда выполняю toJS () на наблюдаемом объекте.Я присваиваю значения observableObject после вызова API, используя Object.assign () .Теперь я использую этот observableObject в вычисленном методе другого магазина, как показано в коде ниже.

class Store {
    @observable observableObject = {};

    Fetch(){
        .....
        APIcall()
        .then((response) => {
            Object.assign(this.observableObject, response.data);
        }).catch(...)
    }
    .....
}

class Store2 {

    @computed get computedValue(){

        // return an non empty {Symbol(mobx administration): ObservableObjectAdministration$$1} object
        console.log(this.rootStore.store1.observableObject);

        // returns True
        console.log(isObservable(this.rootStore.store1.observableObject));

        // return an empty object
        console.log(toJS(this.rootStore.store1.observableObject));

    }
}

Я упоминал эту проблему , но не смог найти никакой помощи.Найдите журнал observableObject ниже.Может ли кто-нибудь объяснить неожиданное поведение toJS() в mobx.

РЕДАКТИРОВАТЬ: поле назначения в журнале наблюдаемого прокси mobx содержит все поля, но преобразование toJS () дает пустой объект.Вот демоверсия песочницы

Answer 1

Это просто вопрос ожидания достаточно долго для ответа API. В вашем CodeSandbox сценарий завершается почти сразу после возврата вызова API, не дожидаясь, пока MobX обновит что-либо. Если вам повезет, он может закончиться достаточно быстро, чтобы увидеть какой-то вывод консоли, но, вероятно, нет.

Хитрость заключается в том, чтобы дождаться API, затем обновить хранилище, а затем прочитать вычисленное значение из него:

import { observable, toJS, runInAction, computed } from "mobx";
import axios from "axios";

class Store {
  @observable observableObject = {};
}

const store = new Store();

class Store2 {
  @computed get computedVar() {
    return toJS(store.observableObject);
  }
}

const store2 = new Store2();
console.log("Object before API call:", store2.computedVar);

axios
  .get("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => {
    runInAction(() => {
      Object.assign(store.observableObject, response.data);
    });
  })
  .then(() => {
    console.log("Object after API call:", store2.computedVar);
  })
  .catch(console.error);