为什么toJS（）应用于可观察对象时会返回一个空对象？ -MobX

Question

在可观察对象上执行 toJS（）时，我得到一个空对象。我在使用 Object.assign（）进行API调用后将值分配给observableObject。现在，我在另一家商店的计算方法中使用此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));

    }
}

我已经提到了这个issue，但找不到任何帮助。在下面找到observableObject的日志。任何人都可以在mobx中解释toJS()的意外行为。

编辑：代理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);