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

问题

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 <ul><li></li></ul>. However after dispatching my action by clicking my button, the error happen. I can actually see the state updated in my redux dev tool (even with the error) but I also can see that the change doesn't impact my store state in my react dev tool.

So here is my reducer :

export default function moviesReducer(state = {items}, action) {
  if(action.type === 'SET_MOVIES_FILTER') {
    return update(state.items, {$splice: [[1,3]]})
  }
    return state;
  }

Here is my item list (from here post) :

let items = [{
  title: 'Mad max',
  year: 2015,
  rating: 8,
  genre: 'fantasy',
}, {
  title: 'Spider man 2',
  year: 2014,
  rating: 7,
  genre: 'fantasy',
}, {
  title: 'Iron man 3',
  year: 2013,
  rating: 7,
  genre: 'fantasy',
}, {
  title: 'Dumb and Dumber To',
  year: 2014,
  rating: 5,
  genre: 'comedy',
}, {
  title: 'Ted 2',
  year: 2015,
  rating: 6,
  genre: 'comedy',
}];

Here is my action :

export const SetMoviesFilter = () => {
  return {
    type: 'SET_MOVIES_FILTER'
  };
};

And here is my components :

const movieTable = ({testmovie, movieTable }) => {

        return (

        <div>
            <button onClick={movieTable}>testbutton</button> 
            <ul>
            {testmovie.map((m, i) =>
        <li key={i}>{m.year} - {m.title}.({m.genre}) - {m.rating}</li>
      )}
            </ul>
        </div> )
    }

function mapStateToProps(state) {
  return {
      testmovie: state.moviesReducer.items

  };
};


const mapDispachToProps = (dispatch) => {
    return {
  movieTable: () => {dispatch (SetMoviesFilter());
        },
    };
};


const AppMovie = connect(mapStateToProps, mapDispachToProps)(movieTable);

Where am I wrong ? what should I do ? I don't know if it's related but I can't make my jsbin work.

thanks.

回答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.

来源：https://stackoverflow.com/questions/38621788/how-do-i-deal-with-cannot-read-property-map-of-undefined-react-redux

标签

reactjs

redux

react-redux