Destructuring nested params, undefined error

Question

I keep getting payload undefined when destructuring:

let videosArray = [];
if (payload.videos) {
  const {
    payload: { videos }
  } = action;
  videosArray = videos;
}

return videosArray;

How can I check for undefined? I have tried the check below, but keep getting the error:

   if (typeof payload !== "undefined") {

Are you getting the error in `if (payload.videos)` or in destructuring? What is the exact error message? It's not clear — adiga, Jul 10 '19 at 08:53
Possible duplicate of [How to avoid 'cannot read property of undefined' errors?](https://stackoverflow.com/questions/14782232/how-to-avoid-cannot-read-property-of-undefined-errors) — adiga, Jul 11 '19 at 03:31

score 0 · Answer 1 · answered Jul 10 '19 at 08:49

0

You need to have action defined like this const action = {payload: {videos: ["Matrix", "Star Wars"]}}

And you can check that payload is not undefined like this if(action && action.payload) then you could do your destructing operation.

answered Jul 10 '19 at 08:49

zagoa

798
4
23

score 0 · Accepted Answer · answered Jul 10 '19 at 08:56

You just have to make sure the action is defined first, and access its parameters instead of calling payload by itself. In your example it looks as if payload was undeclared when you try to access it

function getVideos(action) {
  if (action && action.payload && action.payload.videos) {
    const {payload: {videos}} = action;
    return videos;
  }

  return [];
}

console.log(getVideos()); // action undefined, expected []
console.log(getVideos({})); // payload undefined, expected []
console.log(getVideos({payload: {}})); // videos undefined, expected []
console.log(getVideos({payload: {videos: [1,2,3]}})); // expected [1,2,3]

Of course if you really wanted to complete the task with just destructuring you could simply create some default values like this:

function getVideos(action) {
  const {payload: {videos=[]}={}} = action || {};
  return videos;
}

console.log(getVideos()); // action undefined, expected []
console.log(getVideos({})); // payload undefined, expected []
console.log(getVideos({payload: {}})); // videos undefined, expected []
console.log(getVideos({payload: {videos: [1,2,3]}})); // expected [1,2,3]

score 0 · Answer 3 · answered Jul 10 '19 at 09:11

You could take a check and a default value without destructuring.

function getVideos(action) {
    return action && action.payload && action.payload.videos || [];
}

console.log(getVideos());                 // action undefined, expected []
console.log(getVideos({}));              // payload undefined, expected []
console.log(getVideos({ payload: {} }));  // videos undefined, expected []
console.log(getVideos({ payload: { videos: [1, 2, 3] } })); // expected [1, 2, 3]

Destructuring nested params, undefined error

3 Answers3