React native-如何将 AsyncStorage 中的 return 项目用于异步函数之外？

Question

我正在尝试使用 AsyncStorage 中的项目，存储为在异步函数中创建的变量，但是，当它被 returned 时，它 return 未定义。

import React from 'react';
import {View,Text,TouchableOpacity,StyleSheet}from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
function App(){
  async function save() {
    let info = ['space']
    AsyncStorage.setItem('key', JSON.stringify(info))
  }
  async function show1() {
    try {
      let show = await AsyncStorage.getItem('key');
      show = JSON.parse(show)
      console.log('item:', show)
      return show;
    } catch (error) {
      console.log(error)
    }
  }
  const read=(show)=> {
    console.log(show)
  }
  show1();

函数读取由按钮调用并记录 'undefined' 而不是 ['space']。在异步函数中它正确记录显示为 ['space']，但没有似乎 return 它。是否可以在异步函数之外使用 aysnc 项，或者我是否遗漏了什么。

Answer 1

通过定义

const read=(show)=> { console.log(show) }

您正在声明一个带有参数的函数，该参数在该函数的范围内将被称为 show。

你应该做的是：

const read = show1();
console.log(read);`

或

const read = () => {
 console.log(show1());
}
read();

你应该记住的是，当你在一个函数中声明一个变量时，它在这个函数的范围之外是不可访问的。

所以如果你这样做：

function myAssign() {
let a = 10;
console.log(a) // 10
}
console.log(a) // undefined

Answer 2

直接使用AsyncStorage太复杂了。也许你可以考虑使用 react-native-easy-app. Through it, you can access AsyncStorage in the form of assignment and value, and it supports string, object and boolean data access, Sample project page Storagecontroller.js

  import { XStorage } from 'react-native-easy-app';
  import { AsyncStorage } from 'react-native';
  // or import AsyncStorage from '@react-native-community/async-storage';

   export const RNStorage = {
       token: undefined, 
       isShow: undefined, 
       userInfo: undefined
   };

  const initCallback = () => {

       // From now on, you can write or read the variables in RNStorage synchronously

       // equal to [console.log(await AsyncStorage.getItem('isShow'))]
       console.log(RNStorage.isShow); 

       // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

       // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
       RNStorage.userInfo = {name: 'rufeng', age: 30}; 
  };

  XStorage.initStorage(RNStorage, AsyncStorage, initCallback);

React native-如何将 AsyncStorage 中的 return 项目用于异步函数之外？

React native-How to return item from AsyncStorage to use outside of async function?

javascript

reactjs

react-native

asyncstorage