Как увеличить значение asyncStorage при каждом запуске приложения вact-native?

Question

Каждый раз при запуске приложения я хочу увеличивать переменную myKey из AsyncStorage. Но в моем случае значение никогда не изменится. Я получаю 1 каждый раз при запуске приложения.

Любой знает, как увеличить переменную asyncStorage.

Вот мой код

 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>
    );
  }
}

Answer 1

Похоже, ваша логика вышла из строя. В настоящее время ваша постоянная логика вызывается (в componentWillMount()) перед логикой приращения (в componentDidMount()).

Это означает, что;

1. ваш компонент запускает componentWillMount(), где он сохраняет значение 0 (взятое из исходного состояния) в ключ myKey через AsyncStorage.setItem()
2. после этого, следующий крюк жизненного цикла; componentDidMount() уволен. Здесь вы загружаете значение для myKey через AsyncStorage.getItem() (которое было установлено на 0) и увеличиваете его до 1.

Чтобы решить эту проблему, рассмотрите возможность пересмотра вашего компонента, чтобы логика загрузки, приращения и сохранения значения myKey содержалась в ловушке componentDidMount() жизненного цикла, как указано в коде и комментариях ниже:

 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>
    );
  }
}

Answer 2

Вы пробовали, как показано ниже.

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 это первый параметр, а не value, пожалуйста, отметьте здесь

Answer 3

ComponentWillMount запускается ПЕРЕД ComponentDidMount, поэтому вы всегда устанавливаете свой ключ на 1 (так как ваш state.key = 0), затем вы получаете свой ключ для хранения и обновляете свое состояние с помощью 1. Кроме того, вы можете сохранять только строковые значения в AsyncStorage , поэтому вы должны выполнить преобразования из строки в int сначала, чтобы выполнить вычисление, а затем из int в строку, чтобы сохранить значение. Я бы сделал это, как показано ниже:

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