我如何处理“无法读取未定义的属性‘地图’"?反应/还原 [英] How do I deal with "Cannot read property 'map' of undefined" react/redux

问题描述

再一次，我面临一个非常常见的错误无法读取未定义的属性'map'".我在 <ul><li></li></ul> 中正确加载了项目(电影)的初始列表.但是，通过单击我的按钮调度我的操作后，错误发生了.我实际上可以在我的 redux 开发工具中看到更新的状态(即使有错误)，但我也可以看到更改不会影响我的 react 开发工具中的商店状态.

这是我的减速器:

导出默认函数moviesReducer(state = {items}, action) {if(action.type === 'SET_MOVIES_FILTER') {返回更新(state.items, {$splice: [[1,3]]})}返回状态；}

这是我的项目列表(从这里 post) :

let items = [{title: '疯狂的麦克斯',年份: 2015,评分:8，类型:'幻想'，}, {title: '蜘蛛侠 2',年份: 2014,评分:7，类型:'幻想'，}, {title: '钢铁侠3',年份: 2013,评分:7，类型:'幻想'，}, {title: 'Dumb and Dumber To',年份: 2014,评分:5，类型:喜剧"，}, {标题:'泰德 2',年份: 2015,评分:6，类型:喜剧"，}];

这是我的操作:

export const SetMoviesFilter = () =>{返回 {类型:'SET_MOVIES_FILTER'};};

这是我的组件:

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

)}函数 mapStateToProps(state) {返回 {测试电影:state.movi​​esReducer.items};};const mapDispachToProps = (调度) =>{返回 {电影表:() =>{调度(SetMoviesFilter())；},};};const AppMovie = connect(mapStateToProps, mapDispachToProps)(movieTable);

我哪里错了?我应该怎么办 ?我不知道它是否相关，但我无法制作我的 jsbin工作.

谢谢.

解决方案

state.movi​​esReducer.items 的初始状态是 undefined.

在你的 reducer export default function moviesReducer(state = {items}, action) 中，检查这个 items 来自哪里.当商店初始化时，它很可能是 undefined .你可以给它一个 []

的初始值

您也可以通过将 <ul> 包装在像

这样的 if 语句中来避免这个问题

if (testmovie) {//在这里渲染你的测试电影.}

看起来您的减速器映射正确.所以 state.movi​​esReducer 总是被定义的.

如果您的初始项目列表甚至没有正确加载，则意味着您的 items 对象导致了错误.

如果您的初始列表正确加载，并且错误仅在您调度 SET_MOVIE_FILTER 操作后发生，则意味着您的 update(state.items, {$splice: [[1,3]]}) 正在改变你的状态形状.

我不知道你从哪里得到这个 update 功能.但我猜你应该做 return { items: update(state.items, {$splice: [[1,3]]})}

这就是我将如何调试您的代码.

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.

解决方案

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.

这篇关于我如何处理“无法读取未定义的属性‘地图’"?反应/还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！