级联操作不呈现

Question

我正在做这样的事情：

import { observable, action } from 'mobx';

export default class DataStore {
  @observable pageData:object

  @action fetch() {
    superagent.get(url1)
    .send('got url 1', action((err, results) => {
      if (err)
        return;
      this.pageData = this.pageData || {};
      this.pageData.urlData1 = results;
      this.fetchAnother();
    }));
  }

  @action fetchAnother() {
    superagent.get(url2)
    .send('got url 2', action((err, results) => {
      if (err)
        return;
      this.pageData = this.pageData || {};
      this.pageData.urlData2 = results;
    }));
  }
}

这些操作是分开的，因为有时fetchAnother是自己调用的。

我将存储注入到我的React组件类中。调用fetch时，包装在action中的第一个异步回调将更新页面，并呈现urlData1。然后调用并执行fetchAnother中的第二个回调，但不渲染，只有当我以其他方式强制重新渲染时，urlData2才会显示。为什么?我该如何解决这个问题？

Answer 1

MobX不支持向普通对象动态添加字段。要么使用可观察映射，要么预先初始化字段：

pageData = { urlData1: null, urlData2: null }