CODEWITHSUNDEEP
react-nativeincrementlaunchasyncstorage
kalyani_jamunkar
kalyani_jamunkar

Reputation: 610

how to increment asyncStorage value on every app launch in react-native?

Every time on app launch i want to increment the myKey variable from AsyncStorage. But in my case the value never get change. I am getting 1 every time on app launch.

Anyone knows how to increment the variable of asyncStorage.

Here is my code

 import React, { Component } from 'react';
 import { AsyncStorage, View, Text } from 'react-native';

 export default class App extends Component {
   constructor() {
     super();
     this.state = {
       myKey: 0
      }
    }

  componentWillMount() {
    this.saveData();
 }

 saveData() {
   AsyncStorage.setItem('myKey', this.state.myKey + 1);
   this.setState({'myKey': JSON.parse(this.state.myKey + 1)});
 }

 componentDidMount() {
   AsyncStorage.getItem('myKey').then((value) => {
    this.setState({'myKey': value});
  });
  console.log(this.state.myKey);
}

render() {
   return (
      <View>
        <Text>Hello World</Text>
     </View>
    );
  }
}

enter image description here

Upvotes: 1

Views: 1950

Answers (3)

angelos_lex
angelos_lex

Reputation: 1661

ComponentWillMount fires BEFORE ComponentDidMount, so you always set you key to 1(since your state.key =0), then you get your key for storage and update your state with 1. Also, you can only save string values in AsyncStorage, so you have to do conversions from string to int first , in order to make calculation, and then from int to string in order to save the value. I would do it like below:

async componentDidMount() {
    let key = parseInt(await AsyncStorage.getItem('myKey'));
    AsyncStorage.setItem('myKey', (key + 1).toString());
});

Upvotes: 3

Nitish
Nitish

Reputation: 1063

Have you tried like below.

componentDidMount() {
   AsyncStorage.getItem('myKey').then((err, value) => {
    if (isNaN(err)) {
      if(isNaN(value)) {
        value = 0;
      } else {
        value = parseInt(value);
      }
      AsyncStorage.setItem('myKey', value + 1);
    }
  });
}

Error is the first param not value please check here

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30390

It looks like your logic is out of order. Currently your persist logic is called (in componentWillMount()) before the increment logic (in componentDidMount()).

This means that;

  1. your component fires componentWillMount() where it saves the value of 0 (taken from initial state) to the key myKey via AsyncStorage.setItem()
  2. following that, the next life cycle hook; componentDidMount() is fired. Here you load the value for myKey via AsyncStorage.getItem() (which was set to 0) and increment that to 1.

To resolve this problem consider revising your component so that the logic for loading, incrementing, and persisting the myKey value is contained in the componentDidMount() life cycle hook, as outlined in the code and comments below:

 export default class App extends Component {
   constructor() {
     super();
     this.state = {
       myKey: 0
      }
    }

 componentDidMount() {

   AsyncStorage.getItem('myKey').then((value) => {

    // Parse value which is a string to number so 
    // that arithmetic can be performed in a safe
    // and predictable way
    value = parseInt(value);

    // If invalid parse result, default first value
    // to zero
    if(isNaN(value)) {
       value = 0;
    }

    // Update state
    this.setState({'myKey': value});

    // Add this to persist the incremented value for 
    // use on next launch. Format value as string with
    // "back ticks"
    AsyncStorage.setItem('myKey', `${value}`);
  });
}

render() {
   return (
      <View>
        <Text>Hello World</Text>
        <Text>${ this.state.myKey }</Text>
     </View>
    );
  }
}

Upvotes: 0

Related Questions