Question

我有一个可观察对象，我想存储一些数据。密钥是我的客户实体的唯一ID，值是客户的数组＆＃39;订单（对象本身）。

我使用：

初始化一个对象

@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，create存储用户可观察的_map_s使用 observable.map

所以不要在可观察对象上使用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')
);

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

1 个答案: