在React Native中从AsyncStorage获取项目值

Question

在React Native中从AsyncStorage获取项目值

react-native

6

我是一名初学者，仍在努力学习React Native，所以请帮帮我！

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

以下是我的代码：：

import {AsyncStorage} from 'react-native';

在屏幕1上设置该值

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中的值。

感谢您贡献宝贵的时间。

- user11724723

const mobileNumber = AsyncStorage.getItem('mobileno', (err, MobileNumber) => { let abc = MobileNumber; return abc })但要小心，因为mobileNumber可能不存在，这是一个回调函数，你应该使用await async。 - Rinor Dreshaj

4个回答

3

在您的代码中，abc 超出了范围。 abc 仅在回调函数中声明。一种替代方法是创建一个返回该数据的类方法。我个人认为 async/await 语法比 .then() 链更清晰易懂。文档展示了一个例子。

_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
  }
}

- johnborges

1

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

2

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

AsyncStorage已过时，已移至React-Native-Community。

现在可以使用：

1：- yarn add @react-native-community/async-storage

2：- react-native link @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

- ANKIT DETROJA

0

使用链接

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

安装

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

链接

React Native 0.60+

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

React Native <= 0.59

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

iOS使用cocoapods的注意事项，请运行：

$ cd ios/ && pod install

请参阅手动链接指南文档

升级到React Native 0.60+ 新的React Native带有自动链接功能，可以自动链接项目中的本地模块。为了使其正常工作，请确保先取消链接Async Storage：

$ react-native unlink @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
  }
}

- kirtan dudhat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raymond Mutyaba · Accepted Answer

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()函数完成获取项目后才被调用。