Question

我是一个初学者，仍然尝试学习对母语的反应，所以请帮助我！

我想在函数外部访问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中存储的值可以在其他功能中使用它。

感谢您贡献宝贵的时间

Answer 1

在您的代码中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
  }
}

Answer 2

从“ 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

Answer 3

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>
    );
}

在这种情况下，不需要异步/等待，因为仅在完成.then()函数的提取之后才调用getItem()。

Answer 4

使用链接

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

安装

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

链接

React Native 0.60 +

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

反应本机<= 0.59

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

对于使用cocoapods的iOS，请运行：

$ cd ios / && pod安装

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

升级到React Native 0.60+ 新的React Native具有自动链接功能，该功能可自动链接您项目中的Native模块。为了使其正常工作，请确保先取消链接异步存储：

$ react-native取消链接@ 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
  }
}

从本机AsyncStorage获取项目值

4 个答案: