React-native array state güncellemek.

[sercanyeniyurt]

Merhabalar,

dataSource isminde bir state im var uygulama ilk başlayınca soket ile gelen json verileri object e çevirip state e tanımlıyor ve flatlist e render ediyorum.

Bu işlemden sonra state içinde bulunan itemler de değişiklik yapmak istiyorum;

State içeriği;

{
"data": {
"1": {
"Makine_Adi": "PRES200A - 200 Yadon - 1",
"Makine_No": "1",
"Son_Uretilen_Miktar": "55",
"id": "1"
},
"2": {
"Makine_Adi": "PRES200A - 400 Yadon - 1",
"Makine_No": "1",
"Son_Uretilen_Miktar": "55",
"id": "1"
},
}
}

Ben ilk data render edildikten sonra örneğin 1 numaralı item in Son_Uretilen_Miktar değerini değiştirmek istiyorum setstate ile şöyle düşündüm ancak olmadı :

            this.setState({
                dataSource[1]['Son_Uretim_Miktari']: deger,
            });

nasıl yapabilirim ?

[sercanyeniyurt]

Şimdi kontrol ettim datayı güncelleniyor ama güncelledikten sonra flatlist den kayboluyor üzerine tıkladığımda row kayboluyor;

İlk açıldığında :
https://image.ibb.co/f2if77/Screenshot_1.png

Güncellendiğinde :
https://image.ibb.co/n3wp0S/Screenshot_2.png

Kodlarım :

import React from "react";
import { StyleSheet,View,ActivityIndicator,FlatList,Alert } from "react-native";
import { Container, Header, Title, Left, Right, Button, Body, Content,Text, Card, CardItem } from "native-base";
import Icon from 'react-native-vector-icons/FontAwesome';
import CollapseView from "react-native-collapse-view";
import { PieChart } from 'react-native-svg-charts';
import { Text as SVGText } from 'react-native-svg';
import SocketIOClient from 'socket.io-client';
import TimerMixin from 'react-timer-mixin';
let SQLite = require('react-native-sqlite-storage');
export default class MachinePerformance extends React.Component {
constructor (props) {
super(props);
this.socket = SocketIOClient('http://192.168.2.220:8080');
this.state = {
dataSource: null,
loaded: false
};

}
componentDidMount(){
    this.fetchData();
}


fetchData() {
    this.socket.on('machinePerformanceResult', (data) => {
        if(this.state.dataSource===null){
            this.setState({
                dataSource: data,
                loaded: true
            });

        } else {
            if(Object.keys(data).length===Object.keys(this.state.dataSource).length){
                for (var i=0; i<data.length; i++) {
                    let datas = this.state.dataSource;
                    datas[i]['uretilen_miktar'] = data[i]['uretilen_miktar'];
                    this.setState({dataSource: datas});
                }
            } else {
                this.setState({
                    dataSource: data,
                    loaded: true
                });
            }

        }
    });
    this.socket.emit('machinePerformance', 'artelDataGet');
};


_keyExtractor(item, index) {
    return index;
}
renderItem(data) {
    let { item, index } = data;
    return (
        <CollapseView
            renderView={ (collapse) => {
                return (
                    <View style={styles.view}>
                        <Text style={styles.acctableTitleText}>{item.machine_name}</Text>
                        <Text style={styles.acctableTitleText}>{item.uretilen_miktar}</Text>
                        <Text style={styles.acctableTitleText}>%</Text>
                    </View>
                )
            }}
            renderCollapseView={ (collapse) => {
                return (
                    <View>
                        <Text>icerik</Text>
                    </View>
                )
            }}
        />
    )
}
render() {
    if (this.state.loaded===false) {
        return (
            <Content>
                <ActivityIndicator size="large" color="#45D56E" />
            </Content>
        );
    } else {
        return (
            <Content>
                <View style={styles.tableTitle}>
                    <Text style={styles.tableTitleText}>Name</Text>
                    <Text style={styles.tableTitleText}>Number of Production</Text>
                    <Text style={styles.tableTitleText}>Performance</Text>
                </View>
                {
                    this.state.loaded &&
                    <View style={styles.container}>
                        <FlatList
                                  data={this.state.dataSource}
                                  keyExtractor={this._keyExtractor}
                                  renderItem={this.renderItem.bind(this)}
                        />
                    </View>
                }
            </Content>
        );
    }
}

}
const styles = StyleSheet.create({
title: {
width: '100%',
fontSize: 19,
fontWeight: 'bold',
textAlign: 'center',
color:'#6b6b6b',
backgroundColor:'#eee',
paddingTop:10,
paddingBottom:10
},
tableTitle:{
flex: 1,
flexDirection: 'row',
backgroundColor: '#fafafa',
marginTop:5
},
tableTitleText:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '32%',
borderRightColor: '#eee',
borderRightWidth: 1,
textAlign:'center',
alignSelf: 'center',
paddingBottom:10,
paddingTop:10,
fontSize: 10,
fontWeight: 'bold',
color:'#6b6b6b'
},
acctableTitleText:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '32%',
borderRightColor: '#eee',
borderRightWidth: 1,
textAlign:'center',
alignSelf: 'center',
paddingBottom:10,
paddingTop:10,
fontSize: 24,
fontWeight: 'bold',
color:'#6b6b6b'
},
container: {
flex: 1,
backgroundColor: '#fff',
},
view: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#fafafa'
},
collapseView: {
flex: 1,
flexDirection: 'row',
padding: 20
},
optionList: {
flex: 1,
flexDirection: 'column'
},
option:{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textAlign:'center',
alignSelf: 'center',
},
optionbadge:{
flex: 1,
width:10,
height:10,
paddingTop:0,
paddingLeft:0,
paddingRight:0,
paddingBottom:0
},
optionText: {
marginLeft:3,
fontSize:10
},
pieList: {
width: '40%'
},
machineStatus: {
width: '60%'

},
personList: {
    width: '100%',
    marginLeft:5,
    paddingTop:5,
    paddingBottom:5,
    paddingLeft:5,
    paddingRight:5
},
personName: {
    marginLeft:5,
    marginTop:5
},
person: {
    marginTop:5,
    flex: 1,
    flexDirection: 'row'
}

});

[abdurrahmanekr]

Merhaba, şimdi ben burada olayı tam olarak anlamadım. Debugger kullanıyor musun? Sana gelen verileri tıklamadan önce, tıklamadan sonra hepsini console.log ile yazdırıp atar mısın? Eğer bir objedeki değeri değiştirmek istiyorsan veri bu ise:

var a = {
    "data": {
        "1": {
            "Makine_Adi": "PRES200A - 200 Yadon - 1",
            "Makine_No": "1",
            "Son_Uretilen_Miktar": "55",
            "id": "1"
        },
    }
}

Tek yapman gereken json işlemi yani:

a.data["1"]["Son_Uretilen_Miktar"] = 654645;
this.setState({
    dataSource: a.data
})

Yani aslında bana kalırsa yapmak istediğin çok kolay bir şey.

[sercanyeniyurt]

@abdurrahmanekr Merhabalar, dediğiniz gibi yaptım ve sorunu çözdüm şuan state de ki veri değişiyor fakat veri değiştikten sonra flatlist den kayboluyor o veri, console dan baktığımda ise veri mevcut güncellediğim de siliniyor, öncesini sonrasını 2. mesajımda paylaşmıştım;

İlk açıldığında :
https://image.ibb.co/f2if77/Screenshot_1.png

Güncellendiğinde :
https://image.ibb.co/n3wp0S/Screenshot_2.png

[abdurrahmanekr]

console.log'u state güncellendikten sonra yazdırıp dener misiniz? ör:

this.setState({/*burası aynı*/}, () => console.log(this.state.dataSource))

[abdurrahmanekr]

Eğer bir önceki state'den farklı ise sorun var demektir

[sercanyeniyurt]

Güncellemeden önce;
https://preview.ibb.co/koGQPn/Screenshot_1.png

Güncelledikten Sonra;
https://preview.ibb.co/esnX4n/Screenshot_2.png

Veriler doğru geliyor uretilen_miktar değeri de değişiyor ama, bu işlemden sonra flatlist den kayboluyor,

Eğer verileri null yapıp tekrar setstate yaparsam her güncellemede sıkıntı olmuyor ama böyle yaptığım da da liste silinip tekrar oluşuyor ben verileri silmeden direk güncelleyerek yapmalıyım bunu güncelliyorum ama flatlist den kayboluyor dediğim gibi

[abdurrahmanekr]

FlatList component'inin azizliğine uğramış olabilirsin. Sorunu burada çözen olmuş. FlatList'e removeClippedSubviews={false} attr ekleyip dener misin?

[sercanyeniyurt]

@abdurrahmanekr; Merhabalar problemi çözdüm fakat removeClippedSubviews={false} ile alakası yok, kullandığım style ile alakalı sanırım, ne hikmetse renderItem fonksiyonun da bulunan styles'ı kaldırdıktan sonra problem düzeldi, flex ile ilgili olabilir diye düşünüyorum sonucu paylaşacağım.

Teşekkür ederim.

Öncesi;

                <View style={styles.view}>
                    <Text style={styles.acctableTitleText}>{item.machine_name}</Text>
                    <Text style={styles.acctableTitleText}>{item.uretilen_miktar}</Text>
                    <Text style={styles.acctableTitleText}>%</Text>
                </View>

Sonrası;

                    <View>
                        <Text>{item.machine_name}</Text>
                        <Text>{item.uretilen_miktar}</Text>
                        <Text>%</Text>
                    </View>

[abdurrahmanekr]

Hmm, sorunu çözdüğüne sevindim 🎉 . Sitillerle ile alakalı sorunlar gerçekten baş ağrıtıcı olabiliyor :/

[emrebeyoglu]

Merhaba, aynı sorunu bende yaşıyordum araştırmalarım sonucunda sto'da bir çözüm buldum örnek ve kaynağı aşağıya bırakıyorum...

state = {
      data : [
        {
          text : "İlk değer"
        }
      ]
    }

data arrayının ilk elemanının text değerini bir label'e bağladığımızı varsayalım.
Bu değeri değiştirdiğimizde labelde yazan yazının da güncellenmesini istiyoruz.
Düz mantık olarak herkesin aklına geldiği gibi render almıyor, ancak veriyi güncelliyor ve console'da yazdırıldığında güncel veri görüntüleniyor.

var data = [ ...this.state.data ]; // önemli nokta burası
data[0].text = "İkinci değer";
this.setState({ data });

yukarıdaki gibi yapıldığında UI de render alıyor.

Kaynak : https://stackoverflow.com/questions/42029477/how-to-update-array-state-in-react-native