6

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

我初始化一个对象：

@observable data =  {};

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

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

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

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

4

1 回答 1

8

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

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

因此extendObservable，您可以向 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')
);
于 2016-09-29T19:14:22.390 回答