从 react-native 中的 AsyncStorage 获取项目值答案

【问题标题】：Get item value from AsyncStorage in react-native从 react-native 中的 AsyncStorage 获取项目值
【发布时间】：2019-07-10 20:10:26
【问题描述】：

我是一个初学者，还在努力学习如何反应原生，所以请帮助我！

我想在函数外访问 AsyncStorage.getItem 值。我将通过代码进一步解释

这是我的代码：

import {AsyncStorage} from 'react-native';

在 screen1 上设置该值

AsyncStorage.setItem('mobileno', JSON.stringify(MobileNo));

尝试在屏幕 2 上获取该值

 AsyncStorage.getItem('mobileno', (err, MobileNumber) => {
    let abc = MobileNumber;
    console.log("abc value " + abc)
   })


  let { MobileNo } = abc;
  console.log({MobileNo})

我想在函数外部以let { MobileNo } = abc; 访问该 abc 值，但它显示错误！

注意： [console.log("abc value " + abc) 完美运行]

错误

找不到变量 abc

问题

那么，我如何访问整个页面的 abc 或 AsyncStorage 值 [在该函数之外]；因为我也想在其他函数中使用该值！

简而言之，我希望 AsyncStorage 中的存储值在其他功能中使用。

感谢您贡献宝贵的时间

【问题讨论】：

const mobileNumber = AsyncStorage.getItem('mobileno', (err, MobileNumber) => { let abc = MobileNumber; return abc }) 小心，虽然 mobileNumber 可能不存在，因为这是一个回调，你应该与 await async 一起使用

标签： react-native

【解决方案1】：

constructor(props) {
    super(props);
    this.state = {
        mobileNumber: '',
    };
}

componentDidMount() {
    AsyncStorage.getItem('mobileno').then((mobileNo) => {
        if(mobileNo){
            this.setState({mobileNumber: mobileNo});
            console.log(this.state.mobileNumber);
        }
    });
}

render() {
    return(
        <View>
            <Text>{this.state.mobileNumber}</Text>
        </View>
    );
}

在这种情况下 async/await 不是必需的，因为 .then() 仅在 getItem() 函数完成获取项目后调用。

【讨论】：

我的_storeData方法对吗？ _storeData = async () => { try { await AsyncStorage.setItem('@MySuperStore:mobileno', value); } catch (error) { // 保存数据出错 } };
是的，您正确设置了项目。不要忘记在您的应用程序中的某处调用 this._storeData() 。您正在将函数分配给变量，但需要使用该变量才能保存该值。
感谢您的贡献，但我想 getItem on componentDidMount();有可能吗？
在componentDidMount() 中使用AsyncStorage.getItem() 更新了我的答案
让我们continue this discussion in chat。

【解决方案2】：

在您的代码中，abc 被调用超出范围。 abc 仅在您的回调中声明。另一种方法是创建一个返回该数据的类方法。我个人觉得 async/await 语法更简洁，更容易理解 .then() 链。

docs show an example of this

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('mobileno');
      if (value !== null) {
        // We have data!!
        console.log(value);
        return value;
      }
  } catch (error) {
   // Error retrieving data
  }
}

【讨论】：

_storeData = async () => { try { await AsyncStorage.setItem('@MySuperStore:mobileno', value); } catch (error) { // 保存数据出错 } };

【解决方案3】：

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

AsyncStorage 已弃用，已移至 React-Native-Community

现在可以使用了

1 :- 纱线添加 @react-native-community/async-storage

2 :- react-native 链接@react-native-community/async-storage

代码：-

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

storeData = async () => {
  try {
    await AsyncStorage.setItem('@storage_Key', 'stored value')
  } catch (e) {
    // saving error
  }
}

getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

链接：- https://www.npmjs.com/package/@react-native-community/async-storage

【讨论】：

【解决方案4】：

使用链接

https://github.com/react-native-community/async-storage

安装

$ yarn add @react-native-community/async-storage

链接

React Native 0.60+

CLI 自动链接功能在构建应用程序时链接模块。

React Native

$ react-native 链接@react-native-community/async-storage

注意对于使用 cocoapods 的 iOS，运行：

$ cd ios/ && pod 安装

有关手动链接指南，请参阅文档

升级到 React Native 0.60+ 新的 React Native 带有自动链接功能，它会自动链接项目中的 Native Modules。为了让它工作，请确保先取消链接异步存储：

$ react-native unlink @react-native-community/async-storage

用法

导入

从“@react-native-community/async-storage”导入 AsyncStorage；

存储数据

storeData = async () => {
  try {
    await AsyncStorage.setItem('@storage_Key', 'stored value')
  } catch (e) {
    // saving error
  }
}

读取数据

getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

【讨论】：