Mobx:将新的(数组)属性添加到可观察对象

Question

我有一个可观察的对象,我想存储一些数据.密钥是我的客户实体的唯一ID,值是客户订单的数组(对象本身).

我初始化一个对象:

@observable data =  {};

然后,当我从网络获取数据时,我想存储它们,使用:

@action
saveData(customerId, ordersForCustomer) {
  this.data = extendObservable(this.data, {
    [customerId]: observable(ordersForCustomer);
  }
}

不幸的是,似乎我的对象(或其属性)没有被监视.

为什么是这样？我该如何解决这个问题？对于可观察对象如何使用数组作为其值,我需要了解一些特殊内容吗？

Answer 1

此问题在文档的常见陷阱和最佳实践部分中提出:

MobX可观察对象不会检测或响应之前未声明可观察的属性分配.因此,MobX可观察对象充当具有预定义键的记录.您可以使用 extendObservable(target, props)向对象引入新的可观察属性.但是对象迭代器会自动for .. in或 Object.keys()不会对此做出反应.如果需要动态键控对象,例如按id存储用户,请使用observable.map创建observable _map_s .

因此extendObservable,您可以只在地图上添加新密钥,而不是在可观察对象上使用:

@observer
class App extends Component {
  @observable data = asMap({});
  constructor() {
    super();
    setInterval(() => {
      this.data.set(Math.random().toString(36).slice(-5), Math.random());
    }, 1000);
  }
  render() {
    return (
      <div> 
        { this.data.entries().map(e => <div> {e[1]} </div>) }
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);