React native props

Pozdravljeni!

Imam en velik problem in ne vem kaj bi lahko bilo narobe. Vse sem že zdebagiral in ne vem zakaj je tako.

Opis:
Imam dva screena, v prvem (A) imam react native calendar v katerem preko apija dobivam določene podatke. V drugem screenu (B) pa te podatke prikazujem za določen dan itd...Preko props-ov iz screena A v B (react-navigation) prenašam polje z določenimi podatki in jih prikazujem v flatlistu.

screen B: render metoda

render() {
    return (

        <View style={{ flex: 1  }}>
          <CustomHeader {...this.props} />
          <TicketDiaryHour {...this.props} />
    ....);
}

Problem nastane pri komponenti TicketDiaryHour


Primer napake:
Iz A v B prenesem podatke, jih shranim v metodi componentDidMount() v state (

this.setState(...);

) od screena B v eni izmed komponent, ter jih prikažem v flatlistu. Naslednji korak je, da nekaj teh podatkov spremenil v flatlist in jih zopet shranim v state od screena B.

Ko zapustim screen B in ponovno vstopim, podatki v flatlistu ostanejo isti kot prej, čeprav bi morali biti drugačni...S propsi namreč prenašam še nekaj drugih stvari recimo besedilo, ki pa ostane prejšnjo tudi, če karkoli spremenim v Textinputu in grem nazaj.

Skratka problem je, da se tudi propsi spreminjajo, čeprav podatke shranjujem v state od screena B, ter jih ravno tako prikazujem.

Koda:

Screen B:

componentDidMount() {

        //console.log('Izvedem se vedno');
        console.log('List of students Diary hours: ' + JSON.stringify(this.props.listOfStudents));

        this.setState({
            data: this.props.navigation.state.params.props.listOfStudents,
            textOpombe: this.props.navigation.state.params.props.notes,
            textVsebinaUre: this.props.navigation.state.params.props.lesson,
            finished: this.props.navigation.state.params.props.finished,
            absent: parseInt(this.props.navigation.state.params.props.apsent.substring(0,1)),
        }); 


        if(this.props.navigation.state.params.props.listOfStudents.length >= 2) {

            this.setState({
                height: 130
            });
        }

       
      }

Flatlist v screenu B:

<FlatList
                                    ref={(list) => this.myList = list}
                                    style={[styles.flatList,{height: this.state.height}]}
                                    data={this.state.data}
                                    scrollEnabled = {this.state.scrollingChild}

                                    contentContainerStyle={{ padding: 15 }}
                                    renderItem={({ item }) => (

                                          <View style={styles.listItemStyle}>
                                            <View style={{flexDirection: 'row', marginBottom: 7, }}>

                                                {
                                                    item.checked && 
                                                    <TouchableOpacity
                                                        onPress={this.changeCheckedToFalse.bind(this,item)}>
                                                        <View style={styles.checked} /> 
                                                    </TouchableOpacity> || 
                                                    <TouchableOpacity
                                                        onPress={this.changeCheckedToTrue.bind(this,item)}>
                                                        <View style={styles.unchecked} />
                                                    </TouchableOpacity>
                                                }


                                                <Text style={{color: '#000', opacity: 0.6}}>{item.key}</Text>
                                                {
                                                    item.checked &&
                                                    <View style={{position: 'absolute', right: 0 }}>
                                                        <View style={{flexDirection: 'row'}} >
                                                        {
                                                            item.o &&
                                                            <TouchableOpacity 
                                                                style={[styles.touchable1Ch,styles.iconStyle1]} 
                                                                onPress={this.changeSelectionO.bind(this,item)}>

                                                                <Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>O</Text>
                                                            </TouchableOpacity> ||
                                                            <TouchableOpacity 
                                                                style={[styles.touchable1,styles.iconStyle1]} 
                                                                onPress={this.changeSelectionO.bind(this,item)}>

                                                                <Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>O</Text>
                                                            </TouchableOpacity>
                                                        }
                                                        {
                                                            item.n &&
                                                            <TouchableOpacity 
                                                                style={[styles.touchable2Ch,styles.iconStyle1]} 
                                                                onPress={this.changeSelectionN.bind(this,item)}>
                                                                <Text style={{color: '#fff', fontSize: 18, alignSelf: 'center' }}>N</Text>
                                                            </TouchableOpacity> ||
                                                            <TouchableOpacity 
                                                                style={[styles.touchable2,styles.iconStyle1]}
                                                                onPress={this.changeSelectionN.bind(this,item)}>
                                                                <Text style={{color: '#fff', fontSize: 15, alignSelf: 'center' }}>N</Text>
                                                            </TouchableOpacity>
                                                        }




                                                        </View>
                                                    </View>
                                                }
                                            </View>
                                            {
                                                this.props.navigation.state.params.props.listOfStudents !== undefined && this.props.navigation.state.params.props.listOfStudents.length >= 2 ?
                                                <View style={styles.line} /> : <Text></Text>
                                            }

                                          </View>



                                    )}
                                    keyExtractor={item => item.id}
                                />

Takole recimo shranim določene podatke v flatlistu:

changeSelectionO(item) {
        var data2 = this.state.data;

        var itemIndex = data2.map(function (x) { return x.key; }).indexOf(item.key);



        if(data2[itemIndex].o) {
            data2[itemIndex].o = false;
        } else {
            data2[itemIndex].o = true;
            if(data2[itemIndex].n) {
                data2[itemIndex].n = false;
            }

        }



        this.setState({
            data: data2
        });
        //this.props.listOfStudents

    }

Skratka....
Ne vem zakaj se propsi spreminjajo, tudi če racimo spremenim določen item v flatlistu se ravnotako updatajo propsi. To sem opazil v metodi

componentDidUpdate()

Metoda v screenu B v eni izmed komponent v tem screenu:

componentDidUpdate(prevProps) {
		  console.log('Prev props: ' + JSON.stringify(prevProps));
		  console.log('This props: ' + JSON.stringify(this.props));
}

Čudno stanje:
Popolnoma isti propsi, ko spremenim item v flatlistu:

Prev props: {"navigation":{"state":{"params":{"props":{"id":"418103","headingText":"Klavir","roomText":"Mala dvorana","student":"Ives Berlovčnik","apsent":"1/1","startTime":"07:00","endTime":"07:30","finished":"0","listOfStudents":[{"key":"Ives Berlovčnik","id":"43275","checked":false,"o":true,"n":false}],"minutes":"30","notes":"","lesson":""}}}

This props: {"navigation":{"state":{"params":{"props":{"id":"418103","headingText":"Klavir","roomText":"Mala dvorana","student":"Ives Berlovčnik","apsent":"1/1","startTime":"07:00","endTime":"07:30","finished":"0","listOfStudents":[{"key":"Ives Berlovčnik","id":"43275","checked":false,"o":true,"n":false}],"minutes":"30","notes":"","lesson":""}}}