Mobx：向可观察对象添加新（数组）属性

Question

我有一个可观察对象，我想在其中存储一些数据。 键是我的客户实体的唯一 ID，值是客户订单的数组（它们本身就是对象）。

我初始化一个对象：

@observable data =  {};

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

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

不幸的是，我的对象（或其属性）似乎没有被监视。

这是为什么？我该如何解决这个问题？关于可观察对象如何使用数组作为其值，我需要了解一些特别的东西吗？

Answer 1

文档的Common pitfalls & best practices 部分提出了这个问题：

MobX 可观察对象不会检测或响应属性分配 之前没有被宣布为可观察的。所以 MobX 可观察对象 充当具有预定义键的记录。您可以使用 extendObservable(target, props) 引入新的 observable 对象的属性。但是像for .. in这样的对象迭代器或 Object.keys() 不会自动对此做出反应。如果你需要一个 动态键控对象，例如通过 id 存储用户，创建 可观察的 _map_s 使用 observable.map.

因此，您可以在可观察对象上添加new key to a map，而不是使用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')
);