Reputation: 1746
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?
Upvotes: 8
Views: 17671
Reputation: 876
Another conflict with Flatlist is 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 the solution for this issue uses the Javascript slice method
<FlatList
data={ProductStore.dataFood.slice()} // added .slice()
extraData={ProductStore.dataFood}
refreshing={ProductStore.productsLoading}
numColumns={2} // number 2 conflicts when your array length is 3 or 5 or 7 and etc...
renderItem={this._renderItemFood}
keyExtractor={(item, index) =>
index.toString()
}
/>
Upvotes: 8
Reputation: 1
I got the same problem today, after checking everthing, I've found the problem is that I defined the wrong type of the data, so mobx cannot read it normal.
the wrong defined array:
exampleArr: types.array(types.model({
dataOne: type.string,
dataTwo: type.number <-- this should be a string but I defined it as number
}))
after I changed it to the right type, it works well
exampleArr: types.array(types.model({
dataOne: type.string,
dataTwo: type.string
}))
Upvotes: 0
Reputation: 953
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);;
}
}
);
Upvotes: 6
Reputation: 10732
It appears that you are trying to access an element of an observable array, and that element does not exist. You have two observable arrays, and one of those, deviceTypeChecks
has no elements. However, the code as it is seems okay. Is somewhere else in your code accessing this this array?
Upvotes: 0
Reputation: 2196
What happens if you change your @action
to this:
@action
selectAllChecks = (target, type) => {
this.checks[type] = this.checks[target].map((value) => value);
}
Does that still show the mobx out of bounds
error?
Upvotes: 0