Как сохранить переменную в asyncstorage?

Question

В настоящее время я изучаю native-native.

Я пытаюсь сохранить переменную в asyncstrorage в scriptone.js и вызываю ее в scripttwo.js

Но мне не удалось сохранить переменную вscriptone.js

Что я импортирую в scriptone.js:

import React, { Component, BackAndroid } from "react";
import { AsyncStorage } from 'AsyncStorage';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity, TextInput, Alert} from "react-native";

Это часть моего кода в scriptone.js

class SettingScreen extends Component {
  state = {
      a: '70',
      b: '',
      c: '',
    }; 

onPressButton = () => {
      if (this.state.a == this.state.aa) {     
        this.setState({ b: this.state.a });
        this.storeData();
      }
       else {
        Alert("Try Again");
      }
    }

   storeData(){
        const {a} = this.state;
        let  mynum : a;
        AsyncStorage.setItem('array',mynum)
        Alert("Saved");
   }

...

Отображение ошибки:

"undefined is not an object(evaluating '_AsyncStorage.AsyncStorage.setItem')

Можно узнать в чем проблема?Спасибо.

Answer 1

AsyncStorage

Обычно для использования AsyncStorage вы сначала импортируете его вверху файла, в документации сказано, что вы должны импортировать его следующим образом:

import { AsyncStorage } from 'react-native';

Что вы можете увидеть здесьhttps://facebook.github.io/react-native/docs/asyncstorage

Очевидно, вам следует удалить предыдущий оператор импорта

import { AsyncStorage } from 'AsyncStorage'; 

, так как оставив его, вы вызовете конфликты имен.

Сохранение в AsyncStorage

Сохранение в AsyncStorage является асинхронной задачей, поэтому вы должны использовать функцию async/await, которая означает, что вы должны обновить свою функцию storeData().Вы можете посмотреть документацию https://facebook.github.io/react-native/docs/asyncstorage, чтобы узнать, как это сделать.

storeData = async () => {
  const {a} = this.state;
  let  mynum = a;
  try {
    await AsyncStorage.setItem('array', mynum)
    Alert("Saved");
 } catch (err) {
    console.warn(err);
 } 
}

Настройка состояния

Затем, похоже, вы можете оказаться в состоянии гонки, когда устанавливаете состояние.SetState требуется время, чтобы установить состояние элемента.Поэтому, когда вы звоните

this.setState({ b: this.state.a });

, состояние, возможно, фактически не было установлено к тому времени, когда вы звоните

this.storeData();

, ведущему кневерное значение хранится в AsyncStorage.

Чтобы преодолеть это, есть несколько способов справиться с этим

1. Использовать setState с обратным вызовом
2. Передать переменную для сохранения в качестве параметра this.storeData()

Использование setState с обратным вызовом

В этой статье довольно подробно рассказывается об использовании setState с обратным вызовом https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296, однако вы можете реорганизовать свой onPressButton вчто-то вроде этого

onPressButton = () => {
  if (this.state.a == this.state.aa) {     
    this.setState({ b: this.state.a }, async () => { await this.storeData(); });
  } else {
    Alert("Try Again");
  }
}

Это гарантирует, что this.storeData() не будет запущен, пока состояние не будет обновлено.

Передать переменную для хранения в качестве параметра

Для этого требуется рефакторинг функции storeData() для получения параметра

storeData = async (mynum) => {
  try {
    await AsyncStorage.setItem('array',mynum)
    Alert("Saved");
 } catch (err) {
    console.warn(err);
 } 
}

Теперь, чтобы использовать эту функцию, мы должны обновитьyour onPressButton, обратите внимание, что мы передаем значение, которое мы хотим сохранить, в storeData, что означает, что нам больше не нужно обращаться к нему из состояния внутри storeData

onPressButton = async () => {
  if (this.state.a == this.state.aa) {     
    this.setState({ b: this.state.a });
    await this.storeData(this.state.a);
  } else {
    Alert("Try Again");
  }
}

Получение из AsyncStorage

Это также асинхронная задача, для которой требуется async/await.Чтобы получить строку, которую вы сохранили, все, что вам нужно сделать, это передать правильный ключ функции retrieveData

retrieveData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      console.log(value);
      // do something with the value
    }
   } catch (error) {
     // Error retrieving data
   }
}