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

[wangfaguo]

Welcome to MobX. Please provide as much relevant information as possible!

If at all possible, provide a minimal sample reproduction. Create a minimal reproduction based on this jsfiddle

I have a:

1. [ ] Question: Feel free to just state your question. For a quick answer, there are usually people online at our Gitter channel

2. [ ] Issue:

   • [ ] Provide error messages including stacktrace

   • [ ] Provide a minimal sample reproduction. Create a reproduction based on this sandbox

   • [ ] Did you check this issue wasn't filed before?
   • [ ] Elaborate on your issue. What behavior did you expect?
   • [ ] State the versions of MobX and relevant libraries. Which browser / node / ... version?
3. [ ] Idea:
   
   
   
   • [ ] What problem would it solve for you?
   
   
   • [ ] Do you think others will benefit from this change as well and it should in core package (see also mobx-utils)?
   
   
   • [ ] Are you willing to (attempt) a PR yourself?
   
   

Please tick the appropriate boxes. Feel free to remove the _other_ sections.

Please be sure to close your issues promptly.
//FriendStore.js

class FriendStore {

@observable friends = [];
@observable tags = [];

async friendsListAction(params, callback) {
    this.state = "pending"
    try {
        const response = await FGRequest.post(ApiConfig.api.friends.get_list, params);
        const friendsList = response.data;
        let tmpFriends = [];
       ........
        runInAction(() => {
            this.friends = tmpFriends;
            this.tags = tmpTags;
        })
        callback && callback();
    } catch (error) {
        runInAction(() => {
            this.state = "error"
        })
    }

}

}

//FriendsPage.js

render() {

    var dataSource = this.props.rootStore.FriendStore.friends;
    console.log('1111111111111111');
    return (
        <View style={styles.container}>
            <View style={{height: iOS ? 64 : 44, alignItems: 'center', justifyContent: 'center'}}/>

            <SectionList
                ref='list'
                renderSectionHeader={this._renderSectionHeader}
                renderItem={this._renderItem}
                sections={dataSource}
                refreshing={this.state.freshing}
                onRefresh={() => {
                    this.loadData();
                }}
                ItemSeparatorComponent={this._separatorCom}
                SectionSeparatorComponent={this._sectionSeparatorCom}
                keyExtractor={
                    (item, index) => "index" + index + item
                }
                onEndReachedThreshold={
                    0
                }
                stickySectionHeadersEnabled={
                    true
                }
                ListHeaderComponent={
                    this._header
                }
                ListFooterComponent={
                    this._footer
                }
                onViewableItemsChanged={(info)=>{
                    // console.log(JSON.stringify(info));
                }}
            />
            <View style={{
                flex: 1,
                position: 'absolute',
                width: 20,
                height: '100%',
                alignSelf: 'flex-end',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                {this.props.rootStore.FriendStore.tags.map((item, index) => {
                    const tag = item <= 90 ? String.fromCharCode(item) : '#';
                    return (
                        <TouchableOpacity key={index} onPress={this._onSectionselect(index,tag)}>
                        <Text style={{height: 25, textAlign: 'center', textAlignVertical: 'center'}}
                                  >{tag}</Text>
                        </TouchableOpacity>)
                })}
            </View>
        </View>

    );
}

[mweststrate]

The issue lacks a lot of relevant information.
Feel free to reopen after properly filling in the issue template.

[r3wt]

@mweststrate experiencing a similar problem in mobx 3 on ios 7 when using .toJS() on an array. if i remove .toJS() i get maximum callstack size exceeded and the trace points to here:

[SPineapple]

I am trying with decorate API like this :
//declare array games
games = [ ];

//storing get api request i.e

const res = await instance.get('game/date/list/');
this.games = res.data;

[
    {
        date: '2019-09-15',
        data: [
            {
                title: 'Ashtanga Yoga', 
                user: 'Heihachi',
            },
            {
                title: 'Second',    
                user: 'Mishima',    
            }
        ]
    },]



md5-5dc63ffefef1ab17dc1a34fd6e9cf4af



decorate(GameStore, {
    games: observable.shallow,

})



md5-de4d21490206adfb098b603098eb33d9



[mobx.array] Attempt to read an array index (x) that is out of bounds (x)



md5-f8472364dc66eac6b4efc42db6f53097



state = {
games:gameStore.games
}

but I get this warning and it fires multiple times

What should I need to do to fix it,
Im using a calendar that has SectionList,
if that triggers the warning?

[mweststrate]

Please open a new issue for a new issue

Op wo 18 sep. 2019 07:04 schreef Shai [e-mail]:

I am trying with decorate API like this :
//declare array games
games = [ ];

//storing get api request i.e

const res = await instance.get('game/date/list/');
this.games = res.data;

[
{
date: '2019-09-15',
data: [
{
title: 'Ashtanga Yoga',
user: 'Heihachi',
},
{
title: 'Second',
user: 'Mishima',
}
]
},]

and

decorate(GameStore, {
events: observable.shallow,

})

I get a warning with :

[mobx.array] Attempt to read an array index (x) that is out of bounds (x)

Even though this.games passed correctly and displayed on the calendar with
library 'react-native-calendars', as in state like this:

state = {
games:gameStore.games
}

but I get this warning and it fires multiple times
[image: image]
https://user-images.githubusercontent.com/18646285/65117722-f52a1680-d9f2-11e9-8cc3-f32f58409e9d.png

What should I need to do to fix it,
Im using a calendar that has SectionList,
if that triggers the waring?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1381?email_source=notifications&email_token=AAN4NBFQBTXU4ZFCLLINXN3QKHAGVA5CNFSM4EUOVGNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6647BA#issuecomment-532533124,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4NBB2ITEKTVH4UCI3OJDQKHAGVANCNFSM4EUOVGNA
.