SectionList doesn't work right with MobX

I am using SectionList with MobX (React-MobX). Then I get lots of warnings from mobx says: [mobx.array] Attempt to read an array index(2) that is out of bounds (2). Please check length first. Out of bound indices will not be tracked by MobX (50 times) and [mobx.array] Attempt to read an array index(4) that is out of bounds (4). Please check length first. Out of bound indices will not be tracked by MobX (6 times) with the code below. I found it may be a bug for SectionList, cause if I commented SectionList rows, it’s ok.

Code here:

import React from 'react';
import {
    View,
    Text,
    SectionList,
    StyleSheet,
} from 'react-native';
import {observer,inject} from 'mobx-react';
import {observable,autorun,action} from 'mobx';

let data = [
            {month: '五月', data: [{
                key:"1",
                date:"27日",
                time:"08:42"
            },{
                key:"2",
                date:"28r",
                time:"08:42"
            }]},
            {month: '六月', data: [{
                key:"3",
                date:"21日",
                time:"08:42"
            },{
                key:"4",
                date:"21r",
                time:"18:42"
            },{
                key:"5",
                date:"21r",
                time:"18:42"
            },{
                key:"6",
                date:"21r",
                time:"18:42"
            }]},
        ];
@observer
export default class List extends React.Component{
    @observable refreshing = false;
    @observable pagination = {
        page:1,
        pageSize:10,
    }
    @observable listData = [];
    @action refresh = ()=>{
        console.warn("refreshed");
        this.pagination.page = 1;
        this.refreshing = true;
        setTimeout(action(()=>{
            this.refreshing = false;
            this.listData=data;
        }),500);
    }
    @action loadMore = ({distanceFromEnd})=>{
    }
    componentDidMount(){
        this.refresh();
    }
    render(){
        return (
            <View style={styles.flex1}>
                <Text>{JSON.stringify(this.listData)}</Text>
                 <SectionList
                    onRefresh={this.refresh}
                    refreshing={this.refreshing}
                    onEndReached={this.loadMore}
                    renderSectionHeader={({section})=><Text>{section.month}</Text>}
                    renderItem={({item})=><Text>1</Text>}
                    sections={this.listData}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    flex1:{
        flex:1,
    },
})

Environment

1. react-native -v: react-native-cli: 2.0.1 react-native: 0.46.0
2. node -v: v7.10.0
3. npm -v: 3.10.9 mobx: 3.2.1 , mobx-react: 4.2.2

• Target Platform: Android (IOS not tested yet)
• Development Operating System: Win10

[stephenlaughton]

@coolguy001tv I ran into this same issue and @brentvatne is correct, you need to slice() your nested arrays to get plain arrays instead of observable arrays. So this.listData[0].data is not compatible with Section.data, whereas this.listData[0].data.slice() will work. See mobx best practices.

[coolguy001tv]

@CodeXtinction you may not do it right. Here’s my example (pseudo code, just for instruction):

let listData = [
            {month: '五月', data: [{
                key:"1",
                date:"27日",
                time:"08:42"
            },{
                key:"2",
                date:"28r",
                time:"08:42"
            }]},
            {month: '六月', data: [{
                key:"3",
                date:"21日",
                time:"08:42"
            },{
                key:"4",
                date:"21r",
                time:"18:42"
            },{
                key:"5",
                date:"21r",
                time:"18:42"
            },{
                key:"6",
                date:"21r",
                time:"18:42"
            }]},
        ];


//
@computed get formattedList(){
        return this.listData.map((v)=>{
            return {
                month: v.month,
                data: v.data.slice(),//You need to slice data
            }
        }).slice();// And slice the listData
    }
//
<SectionList
                    ...
                    sections={this.props.BillStore.formattedList}
                />

If you can’t understand , you can try pasting your code.