How do I deal with “Cannot read property 'map' of undefined” react/redux

Question

Once again, I\'m facing a very common mistake \"Cannot read property \'map\' of undefined\". I have a initial list of items (movies) loading properly inside a

Answer 1

Your initial state for state.moviesReducer.items is undefined.

In your reducer export default function moviesReducer(state = {items}, action), check where is this items coming from. It is most likely undefined when the store intializes. You can give it an initial value of []

You can also avoid this problem by wrapping your <ul> in a if statement like

if (testmovie) {
  // do your testmovie render here.
}

Edit:

it looks like your reducers are mapped correctly. so state.moviesReducer is always defined.

if your initial list of items doesn't even load correctly, means your items object are causing the error.

if your initial list loads correctly, and the error occurs only after you dispatch the SET_MOVIE_FILTER action, means your update(state.items, {$splice: [[1,3]]}) is mutating your state shape.

I don't know where you are getting this update function. but i am guessing you should do return { items: update(state.items, {$splice: [[1,3]]})}

This is how I would go about debugging your code.