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

Question

当我对一个可观察对象执行 toJS() 时，我得到一个空对象。在使用 Object.assign() 调用 API 后，我将值分配给 observableObject。现在我在不同商店的 computed 方法中使用这个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 的日志。谁能解释一下 toJS() 在 mobx 中的意外行为。

编辑：代理 mobx observable 日志中的目标字段包含所有字段，但 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);