Не удалось получить данные из AsyncStorage

Question

Я новичок в реактивной. Я пытаюсь получить данные, сохраненные из screen1.js в Screen2.js, но мне не удалось.

У меня есть импорт Asyncstorage из реактивной системы для обоих файлов .js

Вот как я храню переменную из screenone.js:

class screenone extends Component {
  state = {
      oldpin: '000000',
      newpin: '',
      secpin: '',
     };

  onPressButton = () => {
      if (this.state.newpin == this.state.secpin) {
        this.setState(
            { oldpin: this.state.newpin },
             async() => await this.storeData());
      }
       else {
        ToastAndroid.show("Password Unmatched", ToastAndroid.SHORT);
      }
    }

   storeData = async () =>{
        const {oldpin} = this.state;
        let  pin : oldpin;
        try{
            await AsyncStorage.setItem('mypin',pin);
            ToastAndroid.show("Password Changed", ToastAndroid.SHORT);
        }
        catch (err){
            console.warn(err)
        }}
....

Вот как я пытаюсь получить данные в screentwo.js:

class screentwo extends Component {
  constructor(props) {
super(props);
this.onComplete = this.onComplete.bind(this);
this.state = {
  pin: ''
};
}

retrieveData = async (mypin) => {
  try {
    let value = await AsyncStorage.getItem(mypin);
    if (value !== null) {
      console.log(value);
      this.setState({
      pin: value})
    }
   } catch (error) {
      console.warn(err)
   }
}

onComplete(inputtedPin, clear) {
  retrieveData();
  if (inputtedPin !== this.state.pin) {
    ToastAndroid.show("Incorrect Pin", ToastAndroid.SHORT);
    clear();
  } else {
    ToastAndroid.show("Pin is correct", ToastAndroid.SHORT);
    clear();
    this.props.navigation.navigate("Dashboard");
  }}
  ....

Ошибка:

Reference Error: ReferenceError:Can't find variable:retrieveData

Правильно ли я использую способ хранения и извлечения данных? Любое предложение?

Спасибо.

Answer 1

При вызове асинхронного метода из метода вызывающего этот метод также становится асинхронным. async onComplete () {ожидание this.retrieveData ()}

Answer 2

Есть несколько проблем, которые я вижу в вашем коде.

Во-первых, функция retrieveData().Он асинхронный и должен вызываться с await, также вы получаете сообщение об ошибке: Reference Error: ReferenceError:Can't find variable:retrieveData, потому что вы не использовали this

Так что в идеале вы должны назвать его await this.retrieveData();

Есть еще несколько проблем с этой функцией.Вы используете параметр mypin, но, похоже, не передаете какой-либо параметр в функцию при его вызове.Чтобы решить эту проблему, вы должны вызвать retreiveData() следующим образом:

await this.retrieveData('mypin');

Или вы можете полностью удалить передачу параметра, что я покажу, как это сделать в моем рефакторе ниже.

Наконец, вы вызываете retreiveData каждый раз, когда проверяете inputtedPin, это не так эффективно, это asynchronous, так что это может занять некоторое время, и, во-вторых, также требуется время, чтобы функция setStateзавершено, что означает, что состояние может не обновляться вовремя, когда вы проверяете его по inputtedPin, что означает, что вы проверяете inputtedPin по неправильному значению.

Refactor кода

Так я бы реорганизовал ваш компонент.

1. Refactor retrieveData, так что он больше не принимает параметр, а ключ жестко закодирован в .getItem
2. . В componentDidMount получите значение контакта из AsyncStorage.и сохраните его в состояние.
3. Удалите вызов retrieveData из onComplete

Вот рефакторинг

retrieveData = async () => { // parameter have been removed
  try {
    let value = await AsyncStorage.getItem('mypin'); // notice I am now passing the key as a string not as a parameter
    if (value !== null) {
      console.log(value);
      this.setState({ pin: value })
    }
   } catch (error) {
      console.warn(err)
   }
}

// here we call the refactored retrievedData which will set the state. 
async componentDidMount () {
  await this.retrieveData();
}

onComplete(inputtedPin, clear) {
  // we remove the call to retrieveData as we have already gotten the pin in the componentDidMount
  if (inputtedPin !== this.state.pin) {
    ToastAndroid.show("Incorrect Pin", ToastAndroid.SHORT);
    clear();
  } else {
    ToastAndroid.show("Pin is correct", ToastAndroid.SHORT);
    clear();
    this.props.navigation.navigate("Dashboard");
  }
}

Answer 3

только заменить

retrieveData();

на

this.retrieveData();