React Native Render Problem

React native ile uygulama geliştirirken karşılaşabileceğiniz ve insanın sabrını zorluyabilecek bir bug dan bahsetmek istiyorum aslında bug olmayabilir önlem yada kullanım ile ilgili bir durum olabilir ancak bir sorun olarak karşımıza çıkıyor.

Sorundan bahsedecek olursak bu sorun ile butona tıkladığınızda ekranda bulunan bir <Text> içeriğini değiştirmek isteyebilirsiniz bu işlemi gerçekleştirmek için uygulamanız gereken yöntem

this.state.textYazisi= 'Yeni gelecek olan içerik';

yukarıdaki şekilde kullanmanız durumunda butona bastığınızda text içeriği değişmeyecektir, uygulama üzerinden bahsedersek

import React from 'react';
import {View, Text,TouchableOpacity} from 'react-native';

export default class App extends Component{

constructor(props){
    super(props);
    this.state({
        degisecekDeger:'',
    })
}

_yaziyiDegistir(){
    this.state.degisecekDeger='Yeni Değer';
}

    render(){
    return(
    <View>
            <TouchableOpacity
            onPress={
                ()=>this._yaziyiDegistir()
            }
            >
                <Text>{this.state.degisecekDeger}</Text>
            </TouchableOpacity>
    </View>
    )
    }
}

yukarıdaki şekilde kullanım gerçekleştirirseniz butonun üstündeki text değişmeyecektir, işlem gerçekleşecek değerler atanacak ancak ekranda bu sonucu göremeyeceksiniz, bu kullanım yalnış bir yöntemdir, doğrusu ise this.setState() kullanmaktır, doğrusundan bahsedersek ;

import React from 'react';
import {View, Text,TouchableOpacity} from 'react-native';

export default class App extends Component{

constructor(props){
    super(props);
    this.state({
        degisecekDeger:'',
    })
}

_yaziyiDegistir(){
    this.setState({
        degisecekDeger:'Yeni Değer',
    })
}

    render(){
    return(
    <View>
            <TouchableOpacity
            onPress={
                ()=>this._yaziyiDegistir()
            }
            >
                <Text>{this.state.degisecekDeger}</Text>
            </TouchableOpacity>
    </View>
    )
    }
}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir