Async Storage returning function instead of values

Question

I'm trying to use AsyncStorage in my react native app and dont know why is not working.

Basically I want to have an indexed array (or a any key-value pair) stored in asyncstorage with true or false for every element that have been added.

import {AsyncStorage} from 'react-native';

....

componentDidMount() {
    this.storeData('favourites', []);
}

addOrRemove(id) {
    let favourites = this.getData('favourites');
    console.log('favourites getted: ', favourites);
    favourites[id] = favourites[id] ? false : true; //this logic is working fine
    this.storeData('favourites', favourites);
}

getData and storeData:

 storeData = (key, value)  => async () => {
        try {
            await AsyncStorage.setItem(key, value);
        } catch (e) {
          // saving error
        }
    };

    getData = key => async () => {
        try {
          const value = await AsyncStorage.getItem(key)
          return value;
        } catch(e) {
          // error reading value
        }
    };

This is what I get when I do console.log('favourites getted: ', favourites);

favourites getted:  function _callee2() {
      var value;
      return _regenerator.default.async(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.prev = 0;
              _context2.next = 3;
              return _regenerator.default.awrap(_reactNative.AsyncStorage.getItem(key));

            case 3:
              value = _context2.sent;
              return _context2.abrupt("return", value);

            case 7:
              _context2.prev = 7;
              _context2.t0 = _context2["catch"](0);

            case 9:
            case "end":
              return _context2.stop();
          }
        }
      }, null, null, [[0, 7]]);
    }

When someone clicks on a specific button the method addOrRemove(id) is triggered. I want to get the array that I have stored in my AsyncStorage and put true or false in the id position of that array.

Why I'm receiving that function from the AsyncStorage and not the indexed array that I want?

I think that can be an async/await problem, but don't know where is the issue.

Yep, that's why I'm doing const value = await AsyncStorage.getItem(key) in getData and then returning value. Maybe I'm wrong, but using await, value should be the array and not the promise, right? — Darío GL
– Darío GL, Commented Dec 4, 2019 at 20:45
you are defining getData as async function itself, the thing that you are waiting on is not getData. You are waiting on AsyncStorage.getItem which is another async call. I am not very familiar with reach but from a JS perspective you either also need to await getData or set the value from the body — sinanspd
– sinanspd, Commented Dec 4, 2019 at 20:49
Sure, you're awaiting inside an async function ... but the async function itself returns a Promise (which is what I said, nothing to do with what getItem returns, I said getData returns a Promise) ... therefore let favourites = this.getData('favourites'); `favourites' is a Promise — Jaromanda X
– Jaromanda X, Commented Dec 5, 2019 at 0:17

Arkerone · Accepted Answer · 2019-12-04 20:53:58Z

2

Your function "storeData" and "getData" return a async function, you can simplify :

 storeData = async (key, value) => {
   try {
     await AsyncStorage.setItem(key, value);
   } catch (e) {
     // process error
   }
 };

 getData = async (key) => {
   try {
     const value = await AsyncStorage.getItem(key)
     return value;
   } catch (e) {
     // process error
   }
 };

And use them with async/await :

componentDidMount() {
  this.storeData('favourites', []);
}

async addOrRemove(id) {
  try {
    let favourites = await this.getData('favourites');
    console.log('favourites getted: ', favourites);
    favourites[id] = favourites[id] ? false : true;
    await this.storeData('favourites', favourites);
  } catch (err) {
    //process error
  }
}

answered Dec 4, 2019 at 20:53

Arkerone

2,0362 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Async Storage returning function instead of values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related