How to initialize AsyncStorage variable in React Native?

Question

I have tried following this tutorial. It won't display any score at first. What I want to do is there's an initial score of 30. If the user pushes the button, it deducts 20 in it. So when the user reloads the app, it should display a score of 10.

class SupporterMapScreen extends Component<{}> {
  ...
  constructor(props) {
    super(props);

    this.state = {
      isUsed: false,
      show: false,
      points: 30,
      beaconMarkers: {
        coordinate: {latitude: 14.554180, longitude: 121.044099},
        cost: 20,
      },
    };
  }

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

  createBeacon() {
    const { points, beaconMarkers } = this.state;

    if(points >= beaconMarkers.cost) {
      var totalPoints = points - beaconMarkers.cost;

      alert("The beacon has been added!");
      this.setState({ isUsed: true, show: true, points: totalPoints });

      AsyncStorage.setItem('points', totalPoints);
      this.setState({ 'points': totalPoints });
    }
    else {
      ...
  }

  render() {
    return (
      <View style={styles.container}>
        ...
        <View style = {styles.pointsBar}>
          <Text style = {styles.points}>POINTS: {this.state.points}</Text>
        </View>
        <View style = {styles.beaconPosition}>
          <Button 
            disabled = {this.state.isUsed}
            style = {styles.beaconButton}
            onPress={ () => Alert.alert(
              'Buy Beacon?',
              'It costs ' + this.state.beaconMarkers.cost + ' points in order to buy beacon.',
              [
                {text: 'No'},
                {text: 'Yes', onPress: () => this.createBeacon()},
              ],
              { cancelable: false }
            )}
            title = 'B'
          />
        </View>
      </View>
    );
  }
}

David Hellsing · Accepted Answer · 2017-11-08 13:45:58Z

2

In your componentDidMount, you should check for falsy values before setting state:

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

I recommend using flow-type or equivalent type checker for your code to find bugs like this more easily .

answered Nov 8, 2017 at 13:45

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to initialize AsyncStorage variable in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related