如何在React Native中使用async/await函数从AsyncStorage中检索值

Question

我创建了prefsManager.js - 用于将数据存储和检索到AsyncStorage中，但我遇到了一个问题，即当打印日志时，它总是返回undefined，因为它是异步的，但我想通过调用函数在日志中打印实际值。

import { AsyncStorage } from 'react-native';
import prefskey from '../utils/constants/prefskeys';

const setValue = async (key, value) => {
    await AsyncStorage.setItem(key, value);
}

const getValue = async (key) => {
    let value = '';
    try {
        value = await AsyncStorage.getItem(key) || 'none';
    } catch (error) {
        // Error retrieving data 
        console.log(error.message);
    }
    return value;
};

const prefsmanager = {
    setValue,
    getValue
}
export default prefsmanager; 

当我按下按钮时，在我的Home.js中调用了这个方法。

_handlePress() {

        await prefsManager.setValue(prefskey.username, this.state.username)

        console.log("username =>>", await prefsManager.getValue(prefskey.username)); 

     }

- Vishal Patoliya ツ

Answer 1

您需要在函数上使用async关键字，就像这样：

    import { AsyncStorage } from 'react-native';
import prefskey from '../utils/constants/prefskeys';

const prefsnamager = {

    setValue: function (key, value) {
        AsyncStorage.setItem(key, value)
    },

    getValue: async (key) => {
        let value = '';
        try {
            value = await AsyncStorage.getItem(key) || 'none';
        } catch (error) {
            // Error retrieving data
            console.log(error.message);
        }
        return value;
    }
}
export default prefsnamager;

调用函数

_handlePress = () => {
        prefsManager.setValue(prefskey.username, this.state.username)

        console.log("username =>>" , prefsManager.getValue(prefskey.username));

     }

- Rishabh Rawat

---

我不想在每个屏幕中编写代码，我只需从prefsmanager类调用函数并返回已传递键作为参数的值。 - Vishal Patoliya ツ

你可以在prefsmanager类中使用此函数，只需在函数中添加参数键并在任何地方调用它即可。我已更新了之前的答案，请查看。 - Rishabh Rawat

它给我语法错误，没有函数关键字。 - Vishal Patoliya ツ

我已经尝试过，但是日志中打印出来的是'username =>>', { _40: 0, _65: 0, _55: null, _72: null }。 - Vishal Patoliya ツ

在getValue函数中使用箭头函数时，您不需要使用“function”关键字，并且需要传递一个参数“key”，例如：getValue = async(key) =>您需要将以下行更改和更新为：value = await AsyncStorage.getItem(key) || 'none'; - Rishabh Rawat

让我们在聊天中继续这个讨论。 - Vishal Patoliya ツ

Answer 2

1. 在存储中设置数值

AsyncStorage.setItem('data','Read Data')

从存储中获取值。

constructor(props) {
    super(props)       

    this.state = {};
    let self=this;

    //this function is called everytime , when you visit this screen.
    this.__didFocusSubscription = this.props.navigation.addListener('didFocus',payload => {
        AsyncStorage.getItem('data').then((value)=>{
            if(value==null){
                self.setState({count:'no data found'})
            }
            else{
                self.setState({count:value})
            }
        })
    });       
}

- mini gondaliya

---

我希望将此内容放在单独的文件中，并从那里调用，而不是在每个屏幕中定义。 - Vishal Patoliya ツ

我已经创建了prefsnamager.js文件，在该文件中定义了AsyncStorage方法的获取器和设置器，并希望通过将prefsnamager.js导入到home.js中，从prefsnamager.js调用函数以设置和获取偏好值。 - Vishal Patoliya ツ

Answer 3

实际上，它类似于Web中的localStorage，但有一点不同。在获取项目时，它是异步的。请注意下面的内容：

AsyncStorage.setItem('key', value);

但在获取时，它看起来像下面这样：

AsyncStorage.getItem('key')
  .then( value => console.log(value) );

- user10916608

---

我们可以从then回调中取出数据并放到我们的屏幕上吗？ - Vishal Patoliya ツ

亲爱的@VishalPatoliyaツ，什么是“take callback”？在then中，您可以传递回调函数并执行任何您想要的操作。在catch中，您可以传递回退函数，然后执行任何您想要的操作。 - user10916608