如何在异步存储中存储变量？

How to stored a variable in asyncstorage?

我目前正在学习 react-native。

我正在尝试将变量存储到 scriptone.js 中的 asyncstrorage 中并在 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')

请问是什么问题？ 谢谢。

异步存储

通常要使用 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);
 } 
}

现在要使用此功能，我们必须更新您的 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
   }
}