How to view value saved by Asyncstorage?

Question

I have a code that saves and reads the value of a state through Asyncstorage, but when closing the app or changing the screen the value goes back to the value of the original state, which in my case is zero. How do I stop when changing screens or close the app the value remains the last changed? What alternative to status variables?

Follows the code:

import React, { Component } from 'react'
import { Text, View, AsyncStorage, TextInput, StyleSheet, TouchableOpacity } from 'react-native'

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      txtInputData: '',
      getValue: '',
    }
  }

  saveValue = () => {
    if(this.state.txtInputData){
      AsyncStorage.setItem('key_default', this.state.txtInputData)
      this.setState({txtInputData: ''})
      alert('Data salved!')
    }else{
      alert('Please, fill the data!')
    }
  }

  getValue = () => {
    AsyncStorage.getItem('key_default').then(value => this.setState({getValue: value}))
  }


  render() {
    return (
      <View style={styles.mainContainer}> 
        <Text>Using AsyncStorage</Text>
        <TextInput
        style={styles.textInput}
        placeholder = 'type here'
        value = {this.state.txtInputData}
        onChangeText={data => this.setState({txtInputData: data})}
        />
        <TouchableOpacity
        onPress={this.saveValue}
        style={styles.TouchableOpacity}
        >
          <Text>Save value</Text>
        </TouchableOpacity>
        <TouchableOpacity
        onPress={this.getValue}
        style={styles.TouchableOpacity}
        >
          <Text> Read value</Text>
        </TouchableOpacity>  
        <Text>Value read:{this.state.getValue}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 20,
  },
  textInput: {
    marginTop: 10,
    borderWidth: 1,
    borderColor: '#fa19',
    fontSize: 15
  },
  TouchableOpacity: {
    width: '50%',
    marginTop: 10,
    borderWidth: 1,
    borderColor: '#fa19',
    padding: 10,
    alignSelf: 'center',
    alignItems: 'center'
  }
})

Answer 1

One of the great advantages of working with class method is the life cycle modes, what I would recommend is to use a componentDidMount so that when starting the application the state has the correct value, something in the format:

componentDidMount () {
  if(AsyncStorage.getItem('key_default')){
    AsyncStorage.getItem('key_default').then(value => this.setState({getValue: value}))
  }
}

And also use the cycle componentWillUnmount so that the last value that is in the local storage when the page is disassembled:

componentWillUnmount () {
  AsyncStorage.setItem('key_default', this.state.txtInputData)
}