ボタンを押した回数をAsyncStorageに保存する方法

Question

前提・実現したいこと

ボタンを押したら、その押した回数をAsyncStorageに保存したいと考えています。

発生している問題

ボタンを押すと'{this.state.applause}'で表示されている数字は１ずつ増えていくのですが
SimulatorをRefreshすると、「０」になってしまいます。

お聞きしたいこと

Refreshして「０」になっているということはAsyncStoregeに保存がされてないと思うのですが
AsyncStorageに保存し、続きからの数字を表示するためにはどこを修正すれば良いでしょうか？

アドバイスいただけたら幸いです。　よろしくお願いいたします。

該当のソースコード

export default class ApplauseButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      applaused: 0,
    };
  }

  componentDidMount = () => {
    AsyncStorage.getItem('applause');
  };

  handlClick() {
     AsyncStorage.setItem('applause', this.state.applause.toString()).then(() => {
       this.setState({ applause: this.state.applause + 1});
     });
 };

  render() {
    return (
      <View style={styles.container}>
        <Button title="????"
          onPress={() => {
            this.handlClick()
          }} />
        <Text style={styles.count}>
          {this.state.applause}
        </Text>
      </View>
    );
  }
}

Answer 1

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { AsyncStorage } from "react-native";

export default class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      applause : 0,
    }
  }

  _storeData = async (key,value) => {
      try{
          await AsyncStorage.setItem(key,value);
      }catch (error){
          console.log(error)
      }
  }

  _getData = async(key) => {
    try {
        const value = await AsyncStorage.getItem(key);
        if (value !== null) {
            this.setState({ applause: Number(value)})
        }
    } catch (error) {
    // Error retrieving data
    }
  }

  handlClick() {
     this._storeData("applause", (this.state.applause + 1).toString())
     .then(() => {
       this.setState({ applause: this.state.applause + 1})
     })
  }

  componentDidMout(){
    this._getData("applause");
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title="????"
          onPress={() => {
            this.handlClick()
          }} />
        <Text >
          {this.state.applause}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

自分も同じ間違いをしていました。
しっかりと理解しているわけではないですが、
getItem(),setItem()
はこのようにして使うとしっかり使えると思います。

Comments

[gnx_vw903]

ご回答ありがとうございます！
AsyncStorageに関して理解することができました！
今後ともよろしくお願いします！