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

Question

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

我使用以下代码初始化这个对象：

@observable data =  {};

接下来，当我从网络获取数据时，我希望将它们存储起来，使用以下代码：

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

很遗憾，我的对象（或其属性）似乎没有被观察。

为什么会这样呢？我该如何解决这个问题？在可观察对象与其值为数组的情况下，是否需要注意一些特殊的事项？

- Matúš Čongrády

---

它将被改变，因此您不需要 this.data = ...。尝试只使用 extendObservable(this.data, { [customerId]: ordersForCustomer })。这样可以吗？ - Tholle

不，它没有。我通过使用可观察的映射解决了我的问题。但是，我仍然想知道当时的情况是什么。 - Matúš Čongrády

Answer 1

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

MobX可观察对象不会检测或响应未在之前声明为可观察的属性赋值。因此，MobX可观察对象充当具有预定义键的记录。您可以使用extendObservable(target, props)向对象引入新的可观察属性。但是，像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')
);

- Tholle

---

截至今天，看起来关于使用地图的文本已经移动到陷阱页面。此外，Weststrate在这里的视频中有一个不错的关于地图的讨论：使用可观察对象、数组和映射在MobX中存储状态，其中关于地图的信息从2:28开始。仍然希望你可以像[]一样包装{}并且像可观察数组一样进行哈希处理（没有新的OM）。显然行不通。 - ruffin