-1

Tenho um código que salva e lê o valor de uma state através do AsyncStorage, porém ao fechar o app ou mudar de tela o valor volta para o valor do estado original, que no meu caso é zero. Como faço para ao mudar de telas ou fechar o app o valor continue o último alterado? Qual alternativa a variáveis de estado?

Segue o código:

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'
  }
})

1 Resposta 1

1

Uma das grandes vantagens de se trabalhar com método de classe é os modos de ciclo de vida, o que eu te recomendaria é utilizar um componentDidMount para que ao iniciar a aplicação o state tenha o valor correto, algo no formato:

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

E também utilizar o ciclo componentWillUnmount para que o último valor que estiver no fique salvo no local storage quando a pagina for desmontada:

componentWillUnmount () {
  AsyncStorage.setItem('key_default', this.state.txtInputData)
}
2
  • Não é possivel fazer utilizando um componente funcional?
    – pablolucio
    Commented 8/05/2020 às 21:59
  • É sim, em componentes funcionais você pode utilizar o hooks useEffect que tem algumas funcionalidades similares a ciclo de vida. Commented 8/05/2020 às 22:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .