异步存储无法设置或获取 React Native答案

【问题标题】：Async storage not working to set or get on React Native异步存储无法设置或获取 React Native
【发布时间】：2017-07-27 03:45:25
【问题描述】：

我正在尝试使用异步存储进行用户身份验证以确定将呈现哪个屏幕，因此当我从异步存储中获取数据时返回给我未定义的人可以帮助我吗？

我的获取码：

var login;
AsyncStorage.getItem("login").then((value) => {
      login = value;
}).done();
alert(login);

我的设置代码：

const insert_user = (username) => {
  AsyncStorage.setItem("login", username);
  Toast.show({
    supportedOrientations: ['portrait', 'landscape'],
    text: `User registered with success`,
    position: 'bottom',
    buttonText: 'Dismiss'
  });
}

【问题讨论】：

标签： react-native asyncstorage

【解决方案1】：

alert(login); 将始终未定义，因为 AsyncStorage.getItem 本质上是异步的，这意味着在您从 AsyncStorage.getItem 接收值之前首先调用 alert(login)

AsyncStorage.getItem("login").then((value) => {
      alert(value); // you will need use the alert in here because this is the point in the execution which you receive the value from getItem.
    // you could do your authentication and routing logic here but I suggest that you place them in another function and just pass the function as seen in the example below.
});

// a function that receives value
const receiveLoginDetails = (value) => {
    alert(value);
}
// pass the function that receives the login details;
AsyncStorage.getItem("login").then(receiveLoginDetails);

进一步参考

AsyncStorage.getItem 将返回一个 Promise：https://www.promisejs.org/
异步与同步：https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript

【讨论】：

【解决方案2】：

从 'react-native' 导入 { AsyncStorage }；

AsyncStorage.setItem('mobileNumber', phoneNumber.number);

AsyncStorage.getItem('mobileNumber', (error, result) => {
  this.setState({
    loginMobileNo: result,
  });

【讨论】：

这里我们可以设置存储值和从存储中获取值，也可以设置获取值到状态
import { AsyncStorage } from 'react-native' 现在已弃用。现在我面临与这个问题相同的问题。

【解决方案3】：

AsyncStorage 与 async 和 await 一起使用的完整方法如下

import { getItem as localStorageGetItem, setItem as localStorageSetItem } from 'services/localStorage';
async loginHandler (){
     localStorageSetItem(ACCESS_TOKEN, response.accessToken);
     var token = await localStorageGetItem(ACCESS_TOKEN);
}

localStorage.js 文件

import AsyncStorage from '@react-native-community/async-storage';

export const getItem = async(item) => {
    try {
        const value = await AsyncStorage.getItem(item);
        return JSON.parse(value);
    } catch (error) {
        return null;
    }
};

export const setItem = async(item,value)=>{
    try {
        await AsyncStorage.setItem(item, JSON.stringify(value));
    } catch (error) {
        console.log("SetItem error ",error)
        return null;
    }
}

【讨论】：

【解决方案4】：

最后，当我在设置项目时使用 StrigyFy 时，AsyncStorage.getItem('foo') 有效。

var myStr = JSON.stringify(yourData);

用键设置项目

AsyncStorage.setItem('key', myStr);

获取项目

var value = AsyncStorage.getItem('key');

【讨论】：

【解决方案5】：

使用“react-native”：“0.56.0”：-

使用以下内容创建一个名为“Pref.js”的文件。（Pref.js 就像一个使用 AsyncStorage 设置和获取数据的全局文件，因此您可以在任何 .js 文件中使用）。

//---- Pref.js ---->
import { AsyncStorage, Alert } from "react-native"

export const kUserName = 'user_name';
export const kUserID = 'user_id';


export const setData = async (strKey, item) => {
    let value = JSON.stringify(item)
    if (value) {
        AsyncStorage.setItem(strKey, value);
    }
}

export const getData = (strKey, callback = (response1) => { }) => {
    AsyncStorage.getItem(strKey).then((value) => {
        callback(value)
    });
}

--------- 在你的“index.js”文件中使用上面的文件 ---------> （以正确的路径导入 Pref.js 文件）

import * as Pref from '../../Pref/Pref'   //IMPORTANT: set your file path.

onLoginClick = () => {

    // Set data in AsyncStorage using "Pref.js" file. "Pref.kUserName" is from Pref.js file:
    Pref.setData(Pref.kUserName, 'Hello World')

    // Get data from AsyncStorage using "Pref.js" file.
    Pref.getData(Pref.kUserName, (value) => {
        if (value) {
            Alert.alert(`Welcome ${value}`)
            //this.props.navigation.push('Home')
        }
    });
}

【讨论】：