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)向对象引入新的可观察的 属性。但是，对象迭代器如for .. in或 Object.keys()不会对此做出自动反应。如果您需要动态键控对象，例如通过ID存储用户，请使用 observable.map创建 可观察_map_s。

因此，而不是一个可观察的对象上使用extendObservable，你可以只添加一个new key to a map：

@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') 
);