时间戳

首页 > 解决方案 > 如何从异步存储中检索数据并在我的组件中使用它？

javascript - 如何从异步存储中检索数据并在我的组件中使用它？

问题描述

我在异步存储中保存了一个 user_id 和令牌，我可以通过控制台日志检索它。具有检索功能。所以我知道 set 函数运行良好，deviceStorage 中的函数都是异步的。

尝试在我的组件中使用检索到的 user_id 和令牌时出现问题，它返回未定义。

如何从存储中获取项目并稍后在我的代码中使用它，我想将令牌和用户 ID 用于获取请求。请帮助我并强调最好的方法。

    import deviceStorage from "../components/services/deviceStorage";
    class Jobs extends Component {
    constructor() {
       super();
       this.state = {
       jobsData: [],
       isLoading: true
       };
      }

    componentDidMount() {


        deviceStorage.retrieveToken().then(token => {
            this.setState({
               token: token
                 });
        });

        deviceStorage.retrieveUserId().then(user_id => {
            this.setState({
               user_id: user_id
             });
        });


const opts = {
  method: "GET",

  headers: {
    "Content-Type": "application/json",
    Authorization: "Token " + this.state.token
  }
};

fetch("http://example.com/job/" + this.user_id, opts)
  .then(res => res.json())
  .then(jobs => {
    this.setState({
      jobsData: jobs,
      isLoading: false
    });
    console.log(jobsData);
  })
  .catch(error => {
    console.error(error);
  });
  }

  render {}

检索和设置代码

import {AsyncStorage} from 'react-native';


const deviceStorage = {
    async storeItem(key, item) {
        try {
            //we want to wait for the Promise returned by AsyncStorage.setItem()
            //to be resolved to the actual value before returning the value
            var jsonOfItem = await AsyncStorage.setItem(key, JSON.stringify(item));
            return jsonOfItem;
        } catch (error) {
           console.log(error.message);
        }
    },
    async retrieveItem(key) {
        try {
            const retrievedItem = await AsyncStorage.getItem(key);
            const item = JSON.parse(retrievedItem);
           // console.log(item);
            return item;
        } catch (error) {
            console.log(error.message);
        }
        return
    }
};

export default deviceStorage;`

标签： javascriptreact-native

解决方案

有两种方法可以获取存储在异步存储中的数据：

(1) 承诺方法。在这里，您的代码不会等待块完成并返回带有 .then子句（如果promise 解决）和.catch 子句（如果有错误）的promise。

(2) Async 和 Await 方法。这是更可取的，在这里您的代码在继续执行以下示例之一之前等待执行：

retrieveData() {
 AsyncStorage.getItem("id").then(value => {
        if(value == null){
             //If value is not set or your async storage is empty
        }
        else{
             //Process your data 
        }
      })
        .catch(err => {
            // Add some error handling
  });

第二种方法示例：

async retrieveData() {
try {
 let value = await AsyncStorage.getItem("id");
 if (value !== null) {
  //you have your data in value variable
  return value;
 }
}
catch (error) {
// Error retrieving data
}


}

推荐阅读