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 }

层叠动作无法渲染

1 个答案: