如何在AsyncStorage中存储按钮被按下的次数

时间:2019-02-12 13:03:13

标签: reactjs react-native

按下按钮时,数字将增加1。

但是,刷新屏幕后,数字显示为“ 0”。

我想在刷新之前显示中断的号码。

我应该在哪里修复将值正确存储在AsyncStorege中的问题? 你能给点建议吗?

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

  componentDidMount = () => {
    const applauseCount = parseInt(AsyncStorage.getItem('applause'),10);
      this.setState({applaused:applauseCount});
  };

  handlClick() {
    const countapplause = this.state.applause + 1;
     AsyncStorage.setItem('applause', countapplause.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>
    );
  }
}

1 个答案:

答案 0 :(得分:1)

我想您应该更改两件事:

1。从AsyncStorage获取计数时设置状态。

2。您是在AsyncStorage中设置先前的值,而不是存储增加的值。

componentDidMount = () => {
  getcount();
};

 getcount = async () => {
  let count = '';
  try {
    count = await AsyncStorage.getItem('applause') || '0';
     count = parseInt(count,10);
     this.setState({applause:count})
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
}


handlClick= async ()=> {
         const count = this.state.applause + 1;
        try{
        await AsyncStorage.setItem('applause', count.toString());
           this.setState({ applause: count});
       }
       catch(error){
        console.log(error.message);
       }
    };