React Native (6) - Hooks ve ClassComponent ile çoklu state object güncelleme

Marhaba,
bu yazımda yine React Native ile multi state kullanımını inceleyeceğiz. Ancak bir önceki yazıdan farklı olarak  burada bir objenin içindeki element güncellenecektir.  Title,ItemCount ve Price değerlerine sahip olan bir product objesi örneklenecektir. title ve price'ta bir değişiklik yapmadan hooks ve ClassComponent ile itemCount değiştirmenin nasıl olacağı paylaşılmaktadır.

ProductItemCount ve ProductItemCountHooks componentleri üzerinde örnekler yapılmıştır. github üzerinden bu componentlerin tamamını inceleyebilirsiniz.

ÖRNEK Product Objesi :
{title: 'iPhone 11',itemCount: 2,price: 1500}

Aşağıdaki adımları takip ederek kendi projenizde uygulayabilirsiniz.

ilk olarak react native ile bir proje oluşturun.

$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.

$ cd someProject

kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {AppButton} from 'appComponent/Button'; export default class App extends Component { render() { return ( <> <ProductItemCount /> <ProductItemCountHooks /> </> ); } } export class ProductItemCount extends Component { constructor(props) { super(props); this.state = { title: 'iPhone 11', itemCount: 2, price: 1500, }; } handleItemCountOnPress = () => { const itemCountValue = (this.state.itemCount += 1); this.setState({itemCount: itemCountValue}); }; render() { return ( <View style={styles.container}> <Text style={styles.paragraph2}> state : {JSON.stringify(this.state)} </Text> <AppButton style={{marginTop: 10}} title="increase item count" onBtnPress={() => this.handleItemCountOnPress()} /> </View> ); } } export const ProductItemCountHooks = props => { const [state, setState] = useState({ title: 'iPhone 11', itemCount: 2, price: 1500, }); return ( <View style={styles.container}> <Text style={styles.paragraph1}>state : {JSON.stringify(state)}</Text> <AppButton style={{marginTop: 10}} title="increase item count" onBtnPress={() => setState({...state, itemCount: state.itemCount + 1})} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, margin: 10, }, input: {height: 40, borderWidth: 1, marginBottom: 10}, paragraph1: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: 'blue', }, paragraph2: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', }, });

Önemli notlar:

• ClassComponent örneğinde itemCount değerini güncellemek için react tan gelen ve  class içerisindeki state'i güncellemek amacıyla geliştirilen  setState methodu kullanılmıştır.
• ClassComponent yapısında state güncellemesi yaparken  setState methoduna güncellenecek element ve bu elementin değeri parametre olarak bir obje içerisinde verilmelidir. ÖRN:   this.setState({itemCount: itemCountValue})
• Hooks yapısında üstteki örnekte varsayılan state tanımlaması aşağıdaki gibi yapışmıştır : const [state, setState] = useState({title: 'iPhone 11',itemCount: 2, price: 1500})

•  Buradaki tanıma göre useState ten alınan setState methodunu kullandığınızda state objesi ezilir. Dolayısıyla title ve price değerleri kaybolur.
•  Bu durumu aşmak için ise önce (...state) tanımıyla mevcutta bulunan state değeri ele alınır daha sonra eldeki state üzerinden itemCount değerinin güncellemesi yapılır. ÖRN:setState({...state, itemCount: state.itemCount + 1})

github(state) : https://github.com/lvntyldz/tutorials/tree/5-react-hooks-multistate-object/react-native-hooks-examples

github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples