javascript - Mobx：可观察数组无法正确显示

Question

我试图了解如何将可观察数组与 Mobx 一起使用。

我很难弄清楚为什么会这样：

let entities = observable([]);
entities[0] = "foo";
autorun(() =>{
  console.log(entities);
});

写道：

[$mobx: Object]
0: (...)
1: (...)
2: (...)
3: (...)
4: (...)
5: (...)
6: (...)
7: (...)
8: (...)
9: (...)
10: (...)
11: (...)
12: (...)
13: (...)
14: (...)
15: (...)
16: (...)
17: (...)
...
999: (...)

而不是经典数组？

Answer 1

弄清楚！

如文档中所述

请记住 Array.isArray(observable([])) 将产生 false，因此每当您需要将可观察数组传递给外部库时，最好在将其传递给其他库或构建之前创建一个浅拷贝通过使用array.slice() 或array.peek() -in 函数（无论如何这是一个好习惯）。所以 Array.isArray(observable([]).slice()) 将产生 true。

文档示例向我们展示了一个todos.filter()可能导致混淆的内容，因为todos它看起来像一个真正的 JS 数组。但事实并非如此。

因此，对于我的示例，我只需要console.log(entities.slice())显示一个真正的 JS 数组。

Answer 2

另一种记录 mobx observable 的方法是使用toJS方法

import { toJS } from 'mobx';

class Store {
  @observable
  fruits = ['Apple', 'Banana'];

  constructor() {
    console.log('this.views :', toJS(this.data));
  }
}

export default new Store();

希望这有帮助。资源