如何从异步存储中检索数据并在组件中使用它?

时间:2019-04-02 22:24:21

标签: javascript react-native

我已经在异步存储中保存了一个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;`

3 个答案:

答案 0 :(得分:0)

您的检索数据存储方法应如下所示

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

答案 1 :(得分:0)

有两种方法可以将数据存储在异步存储中:

(1)承诺方法。在这里,您的代码无需等待代码块完成并返回诺言,如果诺言得到解决,则返回 .then子句,如果出现错误,则返回 .catch子句

(2)异步和等待方法。这是更可取的,这里您的代码等待执行,然后继续执行以下示例之一:

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
}


}

答案 2 :(得分:0)

添加到以前的解决方案中

image_batch = []

for img in imagesList:
    test_image = image.load_img(path+img, target_size=(64, 64))
    test_images = image.img_to_array(test_image)
    test_images = np.expand_dims(test_image, axis = 0)
    image_batch.append(np.array(test_images))

result = classifier.predict(image_batch)