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

Question

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

我用以下方法初始化一个对象：

@observable data =  {};

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

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

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

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

Answer 1

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

MobX 可观察对象不会检测属性分配或对其做出反应 之前没有声明为可观察的。所以 MobX 可观察对象 充当具有预定义键的记录。您可以使用

extendObservable(target, props)

(doc) 引入新的可观察值 对象的属性。然而对象迭代器如

for .. in

或

Object.keys()

不会自动对此做出反应。如果您需要一个 动态键控对象，例如通过 id 存储用户，创建 可观察的_map_s使用 observable.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')
);