undefined is not an object (evaluating Promise .then)

user_3770310 0
Viewed 5379

Im getting this error while developing react native mobile application.

fetchDB function will return a promise

 fetchDB(key) {
    try {
      AsyncStorage.getItem(key, result => {
        return result;
      });
    } catch (error) {
      console.log(error);
    }
  }
}

fetching value from returned promise by using .then()

  getUserName = () => {
    var user = Storage.fetchDB("username");
    user.then(res => {
      alert(res);
    });
  };

its rendering the red screen with error

undefined is not an object

es6-promise promise react-native ecmascript-6 javascript
1 Answers

1) You need to return the promise function explicitly. Fail situation could be handled within catch callback:

fetchDB(key) {
 return AsyncStorage.getItem(key).catch(error => console.log(error));
}

fetchDB("username").then(res => alert(res));

2) Point (1) works only if AsyncStorage.getItem really returns promise. If it's not true, then you need to update AsyncStorage.getItem method to be promise-based. If you have not access to that method or don't want to touch it, the issue could be done also via updating fetchDB function in a way like:

fetchDB(key) {
  return new Promise((resolve, reject) => {
    try {
      AsyncStorage.getItem(key, resolve);
    } 
    catch (error) {
      reject(error);
    }
  })
}

fetchDB("username")
  .then(res => alert(res))
  .catch(error => console.log(error));

3) I would even say that you don't need try-catch due to es6 Promises nature: 

fetchDB(key) {
  return new Promise((resolve, reject) =>
    AsyncStorage.getItem(key, resolve)
  )
}

fetchDB("username")
  .then(res => alert(res))
  .catch(error => console.log(error));

That last .catch handles any errors thrown from fetchDB Promise.

user_32119320
Related