CODEWITHSUNDEEP
react-nativeasyncstorage
user10937918
user10937918

Reputation:

How to stored a variable in asyncstorage?

I currently learning react-native.

I am trying to stored a variable into asyncstrorage in scriptone.js and calling it in scripttwo.js

But i failed to stored the variable in scriptone.js

What i have import in scriptone.js:

import React, { Component, BackAndroid } from "react";
import { AsyncStorage } from 'AsyncStorage';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity, TextInput, Alert} from "react-native";

This is part of my code in scriptone.js

class SettingScreen extends Component {
  state = {
      a: '70',
      b: '',
      c: '',
    }; 

onPressButton = () => {
      if (this.state.a == this.state.aa) {     
        this.setState({ b: this.state.a });
        this.storeData();
      }
       else {
        Alert("Try Again");
      }
    }

   storeData(){
        const {a} = this.state;
        let  mynum : a;
        AsyncStorage.setItem('array',mynum)
        Alert("Saved");
   }

...

The error display :

"undefined is not an object(evaluating '_AsyncStorage.AsyncStorage.setItem')

May I know what the problem? Thank you.

Upvotes: 0

Views: 2813

Answers (1)

Andrew
Andrew

Reputation: 28539

AsyncStorage

Usually to use AsyncStorage you first import it at the top of you file, the documentation says that you should import it as follows: 

import { AsyncStorage } from 'react-native';

Which you can see here https://facebook.github.io/react-native/docs/asyncstorage

Obviously you should remove the previous import statement

import { AsyncStorage } from 'AsyncStorage';

as leaving it in will cause name conflicts.

Saving to AsyncStorage

Saving to AsyncStorage is an asynchronous task so you should use an async/await function that means you should update your storeData() function. You can see the documentation https://facebook.github.io/react-native/docs/asyncstorage for how you should do this. 

storeData = async () => {
  const {a} = this.state;
  let  mynum = a;
  try {
    await AsyncStorage.setItem('array', mynum)
    Alert("Saved");
 } catch (err) {
    console.warn(err);
 } 
}

Setting state

Next it looks like you could be getting yourself into a race condition when you're setting the state. It takes time for setState to set the item to state. So when you call

this.setState({ b: this.state.a });

the state may not have actually been set by the time you call

this.storeData();

leading to the wrong value being stored in AsyncStorage.

To over come this there is a couple of ways you could handle this

  1. Use setState with a callback
  2. Pass the variable to store as a parameter to this.storeData()

Use setState with a callback

This article goes into quite some detail about using setState with a callback https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296 however you could refactor your onPressButton to something like this

onPressButton = () => {
  if (this.state.a == this.state.aa) {     
    this.setState({ b: this.state.a }, async () => { await this.storeData(); });
  } else {
    Alert("Try Again");
  }
}

This will guarantee that this.storeData() won't be run until the state has been updated.

Pass the variable to store as a parameter

This requires refactoring the storeData() function to take a parameter

storeData = async (mynum) => {
  try {
    await AsyncStorage.setItem('array',mynum)
    Alert("Saved");
 } catch (err) {
    console.warn(err);
 } 
}

Now to use this function we have to update your onPressButton, Notice that we pass the value that we want to store to storeData that means we no longer have to access it from state inside storeData

onPressButton = async () => {
  if (this.state.a == this.state.aa) {     
    this.setState({ b: this.state.a });
    await this.storeData(this.state.a);
  } else {
    Alert("Try Again");
  }
}

Retrieving from AsyncStorage

This is also an asynchronous task and requires an async/await. To get the string that you stored all you have to do is pass the correct key to the retrieveData function

retrieveData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      console.log(value);
      // do something with the value
    }
   } catch (error) {
     // Error retrieving data
   }
}

Upvotes: 1

Related Questions