Search code examples
javascriptreact-nativeecmascript-6promisees6-promise

undefined is not an object (evaluating Promise .then)


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


Solution

  • 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.