Uncaught TypeError: Cannot set property 'key' of undefined

Question

Chrome is throwing Uncaught TypeError: Cannot set property 'key' of undefined error, but I really can't figure out what is wrong with the code. I've tried console.log(item) and it is undefined. But using lodash and clone, I'm not sure how to set the value. Sorry for such a noob question, but it would be great if someone could explain to me what is going on, and I'll make sure to spend a lot of time to learn from this!

Below is my code...

  class Actions {

  initSession() {
    return (dispatch) => {

      Firebase.auth().onAuthStateChanged(function(result) {
        var profile = null;

        if (result) {
          profile = {
            id: result.uid,
            name: result.providerData[0].displayName,
            avatar: result.providerData[0].photoURL
          }
        }

        dispatch(profile);
      });
    }
  }

  login() {
    return (dispatch) => {
      var provider = new Firebase.auth.FacebookAuthProvider();
      Firebase.auth().signInWithPopup(provider).then(function(result) {
        var user = result.user;

        var profile = {
          id: user.uid,
          name: user.providerData[0].displayName,
          avatar: user.providerData[0].photoURL
        }

        Firebase.database().ref('/users/'+user.uid).set(profile);
        dispatch(profile);

      }).catch(function(error) {
        console.log('Failed!', error);
      });
    }
  }

  logout() {
    return(dispatch) => {
      Firebase.auth().signOut().then(function() {
        // Sign-out successful.
        dispatch(null);
      }, function(error) {
        // An error happened.
        console.log(error);
      });
    }
  }

  getComments(productId) {
    return (dispatch) => {
      var commentRef = Firebase.database().ref('comments/'+productId);

      commentRef.on('value', function(snapshot) {
        var commentsValue = snapshot.val();
        var comments = _(commentsValue).keys().map((commentKey) => {
          var item = _.clone(commentsValue[commentKey]);
          item.key = commentKey;
          return item;
        })
        .value();
        dispatch(comments);
      });
    }
  }

  getProducts() {
    return(dispatch) => {
      Firebase.database().ref('products').on('value', function(snapshot) {
        var productsValue = snapshot.val();
        var products = _(productsValue).keys().map((productKey) => {
          var item = _.clone(productsValue[productKey]);
          item.key = productKey;
          return item;
        })
        .value();
        console.log(item);
        dispatch(products);
      });
    }
  }

  getProducts() {
    return(dispatch) => {
      Firebase.database().ref('products').on('value', function(snapshot) {
        var productsValue = snapshot.val();
        var products = _(productsValue).keys().map((productKey) => {
          var item = _.clone(productsValue[productKey]);
          item.key = productKey;
          return item;
        })
        .value();
        dispatch(products);
      });
    }
  }

  addProduct(product) {
    return (dispatch) => {
      Firebase.database().ref('products').push(product);
    }
  }

  addVote(productId, userId) {
    return (dispatch) => {
      var voteRef = Firebase.database().ref('votes/'+productId+'/'+userId);
      var upvoteRef = Firebase.database().ref('products/'+productId+'/upvote');

      voteRef.on('value', function(snapshot) {
        if(snapshot.val() == null) {
          voteRef.set(true);
          var vote = 0;
          upvoteRef.on('value', function(snapshot) {
            vote = snapshot.val();
          });
          upvoteRef.set(vote+1);
        }
      });
    }
  }

  addComment(productId, comment) {
    return (dispatch) => {
      Firebase.database().ref('comments/'+productId).push(comment);
    }
  }

  getComments(productId) {
    return (dispatch) => {
      var commentRef = Firebase.database().ref('comments/'+productId);

      commentRef.on('value', function(snapshot) {
        var commentsValue = snapshot.val();
        var comments = _(commentsValue).keys().map((commentKey) => {
          var item = _.clone(commentsValue[commentKey]);
          item.key = commentKey;
          return item;
        })
        .value();
        dispatch(comments);
      });
    }
  }

}

export default alt.createActions(Actions);

And here is the error that I'm getting...

Chrome Console Error:

Uncaught TypeError: Cannot set property 'key' of undefined:

Answer 1

You don't have productKey declared anywhere.

var productKey;

Answer 2

Everything works fine with the data you provided, but I suppose sometimes data comes different and the item becomes undefined you can add a condition so that you can determine whether the data is undefined or not and set the 'key' only for defined items.

item = _.clone(productsValue[productKey]);
if(item) {
  item.key = productKey;
}
return item;