React Native - How to show value saved with Asyncstorage in a Text component

Asked

Viewed 142 times

0

I would very much like to be able to render in a text component the value saved and changed with the Async Storage.

In showData I can get the new value with:

console.log(`novo valor: ${newValue}`)

inserir a descrição da imagem aqui

but I can’t render the value on screen:

<Text>Mostrar novo valor aqui: {/* ${newValue} */}</Text>

inserir a descrição da imagem aqui

In my attempts I obtained:

[Fri Jan 15 2021 22:05:33.510]ERROR ReferenceError: Can't find variable: newValue

import React, { useState } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  Alert
} from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function Home() {
  const [value, setValue] = useState('00')

  const saveData = async () => {
    var newValue = value

    await AsyncStorage.setItem('newValue', JSON.stringify(newValue))

    Alert.alert('Dados salvos com sucesso!')
  }

  const showData = async () => {
    var json = await AsyncStorage.getItem('newValue')
    var newValue = JSON.parse(json)

    console.log(
      `novo valor: ${newValue}`
    )
  }

  return (
    <View style={styles.container}>

      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Text>Alterar valor: </Text>
        <TextInput value={value}
          onChangeText={text => setValue(text)} />

        <Text>Mostrar novo valor aqui: {/* ${newValue} */}</Text>
      </View>

      <TouchableOpacity onPress={saveData}>
        <Text>Salvar</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={showData}>
        <Text>Mostrar</Text>
      </TouchableOpacity>

    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

I’m starting with React Native, and I appreciate anyone who can help!

react-native

  • newValue only exists in the context of the function showData. Wouldn’t it be better to create a state to newValue (const [newValue, setNewValue] = useState('00')), update it with Storage value at the time of calling the function showData?

1 answer

0

You forgot to create a state called newValue so you could change the value visually, and format it correctly within the tag Text

import React, { useState } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  Alert
} from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function Home() {
  const [value, setValue] = useState('00')
  const [newValue, setNewValue] = useState(null)

  const saveData = async () => {
    var newValue = value

    await AsyncStorage.setItem('newValue', JSON.stringify(newValue))

    Alert.alert('Dados salvos com sucesso!')
  }

  const showData = async () => {
    var json = await AsyncStorage.getItem('newValue')
    setNewValue(JSON.parse(json))
  }

  return (
    <View style={styles.container}>

      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Text>Alterar valor: </Text>
        <TextInput value={value}
          onChangeText={text => setValue(text)} />

        <Text>Mostrar novo valor aqui: {newValue}</Text>
      </View>

      <TouchableOpacity onPress={saveData}>
        <Text>Salvar</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={showData}>
        <Text>Mostrar</Text>
      </TouchableOpacity>

    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.