mobx反应升级到版本5，不再创建数组作为迭代器

Question

以下脚本在mobx 3.5.1和mobx反应4.4.1上运行良好

this.filters = observable.map();
this.charges = observable([]);
....
...

     this.filteredCharges = computed(() => this.charges.filter(
          charge => !this.filters.keys().some(
            columnName => charge[columnName].toString().toLowerCase()
              .indexOf(this.filters.get(columnName).toLowerCase()) === -1,
          ),
        ));

只需升级到mobx 5.6.0和mobx-react 5.3.6

开始出错

TypeError: _this.filters.keys(...).some is not a function

阅读本文后，这是有道理的。

  

所有可迭代对象都不再创建数组作为迭代器，而只是创建一个数组   迭代器，以便与官方规格更加紧密地结合。所以   以前的observableMap.values（）将返回一个数组和迭代器，   但是现在它只会返回一个迭代器。所以你不能做   observableMap.values（）。map（fn）。相反，使用   Array.from（observableMap.values（））。map（fn）或   mobx.values（observableMap）.map（fn）。受影响的迭代器为：1。   可观察数组的默认迭代器。 2.的默认迭代器   可观察的地图。 observableMap.entries（），observableMap.keys（）和   observableMap.values（）。

https://github.com/mobxjs/mobx/wiki/Migrating-from-mobx-3-to-mobx-4

问题是，如何有效地更改上述脚本以使其与 Mobx的升级版本。

Answer 1

我相信会有更好的方法来修复它，这是一种解决方法。

 import { observable, computed, toJS } from 'mobx';

    this.filteredCharges = computed(() => this.charges
      .filter(charge => !Object.keys(toJS(this.filters))
        .some(columnName => charge[columnName].toString().toLowerCase()
          .indexOf(((typeof this.filters.get(columnName) === 'object') ?
            this.filters.get(columnName).value :
            this.filters.get(columnName)).toLowerCase()) === -1)));