mobx-react upgrade to version 5, no longer create an array as iterator

0
votes

Following script was working fine on mobx 3.5.1 and mobx-react 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,
          ),
        ));

Just done the upgrade to mobx 5.6.0 and mobx-react 5.3.6

and start getting error 

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

enter image description here

After reading this, it makes sense.

All iterables no longer create an array as iterator, but only a real iterator, to be more closely aligned to the official specs. So previously observableMap.values() would return an array and iterator, but now it will only return an iterator. So you can no longer do observableMap.values().map(fn). Instead, use Array.from(observableMap.values()).map(fn) or mobx.values(observableMap).map(fn). The affected iterators are: 1. The default iterator for observable arrays. 2. The default iterator for observable maps. observableMap.entries(), observableMap.keys() and observableMap.values().

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

Question is, how can I change above script efficiently to make it work with upgrade version of mobx.

1
reactjsmobxmobx-react

1 Answers

0
votes

I am sure there would be better way to fix it, this is one way of doing it. 

 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)));