2

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

编辑：代理 mobx observable 日志中的目标字段包含所有字段，但 toJS() 转换产生空对象。这是沙盒演示

编辑 mobx Object.assign + toJS

observableObject 的 chrome 日志

4

1 回答 1

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);
于 2019-06-17T07:47:39.150 回答