Levent Yıldız: React Native (7) - Hooks ve ClassComponent ile state güncelleme esnasında geçmiş değer(previous state) kontrolü

Marhaba,
bu yazımda yine React Native ile state object kullanırken bir önceki state değerini kontrol etmeyi inceleyeceğiz. Yine product objesi üzerinden örnekler yapılacaktır. Bu kez itemCount değeri değil price değeri hem ClassComponent yapısıyla hemde Hooks yapısıyla güncellenecektir.

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

ProductPriceValue ve ProductPriceValueHooks componentleri ile örnek açıklanmıştır. Github üzerinde bu componentleri inceleyebilirsiniz.

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 {Routes} from 'appEnum';
import {StyleSheet, Text, View} from 'react-native';
import {AppButton} from 'appComponent/Button';

export default class App extends Component {
  render() {
    return (
      <>
        <ProductPriceValue />
        <ProductPriceValueHooks />
      </>
    );
  }
}

export class ProductPriceValue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'iPhone 11',
      itemCount: 2,
      price: 1500,
    };
  }

  handlePriceChange = () => {
    this.setState((prevState, props) => {
      console.warn('prevState : ', prevState);
      return {
        price: prevState.price + 101,
      };
    });
  };

  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.handlePriceChange()}
        />
      </View>
    );
  }
}

export const ProductPriceValueHooks = props => {
  const [state, setState] = useState({
    title: 'iPhone 11',
    itemCount: 2,
    price: 1500,
  });

  const handlePriceChange = () => {
    setState(prevState => {
      console.warn('prevState : ', prevState);
      return {...prevState, price: prevState.price + 100};
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph1}>state : {JSON.stringify(state)}</Text>
      <AppButton        style={{marginTop: 10}}
        title="increase item count"        onBtnPress={() => handlePriceChange()}
      />
    </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',
  },
});

açıklamalar :

ClassComponent yapısında setState methoduna parametre olarak geçilen bir fonksiyon ile prevState değeri alınabilmektedir.
Üstteki örnekte prevState değeri alındıktan sonra price güncellenerek yeni değer state'e kaydedilmiştir.
ClassComponent yapısında setState methoduna parametre olarak fonksiyon geçilerek prevState ile birlikte props değeri de alınabilmektedir.
const [state, setState] = useState();

Hooks yapısında useState ten alınan setState fonksiyonuna parametre olarak fonksiyon geçerek mevcut state değerlerine erişilebilir.
Bu sayede üstteki örnekte eski değere 100 ekleyerek product price güncellenmektedir.
ÖRN: setState(prevState => {return {...prevState, price: prevState.price + 100};});

github(state) : https://github.com/lvntyldz/tutorials/tree/6-react-hooks-prevstate/react-native-hooks-examples

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

Levent Yıldız

4 Mayıs 2020 Pazartesi

React Native (7) - Hooks ve ClassComponent ile state güncelleme esnasında geçmiş değer(previous state) kontrolü

Hiç yorum yok:

Yorum Gönder