0

I have a simple item-calculator-app. The items are stored using Async Storage. Therefore I have created the following class itemStorage.js

import { AsyncStorage } from 'react-native';

export const saveItem = (item) => {
   AsyncStorage.setItem(item.name, JSON.stringify(item));
}

export const getAllItems = async () => {
    const result = [];
    try {
        await AsyncStorage.getAllKeys().then(async keys => {
            await AsyncStorage.multiGet(keys).then(key => {
                key.forEach(data => {
                    console.log(data)
                    result.push(data)//values
                });
                return result;
            });
        });
    } catch (error) {
        console.log('Error loading settings', error);
    }
}

Saving the items works. I can also see the items in the console when I call console.log(data) in the getAllItems-function.

What does not work is the usage of this function in other components. I have a component called calculator.js and have the following code:

callbackFunction = async (childData) => {
        const myItems = await getAllItems().then(item => {
            console.log("items " + item);
        });

But 'item' is always undefined. And I don't know what causes this behaviour.

j0k3r87
  • 43
  • 6
  • Don't mix usage of `await` and `.then`, it just makes things more confusing then they need to be. Its because of this mixing that you are not actually returning from the function you expect. I'd recommend using only `await`/`async` and remove the `.then`s – Brian Thompson May 19 '21 at 19:21
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Brian Thompson May 19 '21 at 22:53

1 Answers1

1

Based on your code, it seems your mixing Async/Await with Promises. It is recommended that you pick only one for your code.

Try something like this, using only Promises, for example:

const result = [];
AsyncStorage.getAllKeys().then(keys => {
    AsyncStorage.multiGet(keys).then(key => {
        key.forEach(data => {
           console.log(data)
           result.push(data)//values
        });
        return result;
    })
    .catch(error => {
        console.log('Error loading multiGet()', error);
    });
})
.catch(error => {
    console.log('Error loading getAllKeys()', error);
});
mdeamp
  • 128
  • 3
  • Thank for the reply. I have changed the functions as you suggested. But how would I call this function in another component? – j0k3r87 May 19 '21 at 19:32
  • 1
    @j0k3r87 You can abstract this function out of this component and put it into a `Utils.js` file, for example, if it's indeed a recurring function. If you take the `Promises` route, you'd need to wrap the execution in a `new Promise()` notation and read it accordingly - you'd also need to execute `resolve(result)` instead of `return result`. Here's a [documentation about it](https://javascript.info/promise-basics). – mdeamp May 19 '21 at 20:47