Mobx console warning

Question

I got this waring message from Mobx.

[mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX

@observable checks = {
      deviceType: ['phone','laptop', ...],
      deviceTypeChecks: [],
      ...
    }

@action
selectAllChecks = (target, type) => {
     const targetChecks = []
     if (this.checks[target].length !== this.checks[type].length) {
        this.checks[target].forEach(el => targetChecks.push(el))
      }
     this.checks[type] = targetChecks
}

How can I remove that warning? However, this code has no problem. It works well.

I'm using selectAllChecks function by onChange function.

const {
  deviceType,
  deviceTypeChecks
} = this.props.store.checks

<label className="mr10">
          <input
            type="checkbox"
            checked={deviceType.length === deviceTypeChecks.length}
            onChange={() =>
              selectAllChecks('deviceType', 'deviceTypeChecks')
            }
          />
          <span>All device type</span>
        </label>

I have to 4 version for IE.

"mobx": "^4.1.0",
"mobx-react": "^5.2.6",

Is there any other solution?

Answer 1

Another conflict with Flatlist when your data array length is 3 or 5 or 7 and etc... but used numColumns={2}. Changed to numColumns={1} warning error solved. But solution for this issue use Javascript slice method

<FlatList
   data={ProductStore.dataFood.slice()} // added .slice()
   extraData={ProductStore.dataFood}
   refreshing={ProductStore.productsLoading}
   numColumns={2} // number 2 conflict when your array length is 3 or 5 or 7 and etc...
   renderItem={this._renderItemFood}
   keyExtractor={(item, index) =>
     index.toString()
   }
/>

Answer 2

Mobx can make observable of dynamic objects (that it does not know in advance)

but if you look on the object at client side debugger (console.log(myObject)) you can see it's not a regular JS object but some Proxy object of Mobx. This is unlike observable of primitive values like numbers and strings.

To avoid this kind of warning, you can use toJS method which converts an (observable) object to a javascript structure.

For example, this code return warning

  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            this.updateSomeUi(this.props.store.myObject);
          }
        }
    );

you can fix this with:

  import { toJS } from 'mobx';  
...
  autorun(
        () => {
          if (this.props.store.myObject !== null ) 
          {
            let myStruct = toJS(this.props.store.myObject);
            this.updateSomeUi(myStruct);;
          }
        }
    );