我該如何處理「無法讀取屬性'地圖'的未定義」react/redux

再次，我面臨着一個非常常見的錯誤"Cannot read property 'map' of undefined"。我有一個在<ul><li></li></ul>內正確加載項目（電影）的初始列表。但是，通過點擊我的按鈕發送我的操作後，發生錯誤。我實際上可以在我的redux開發工具中看到更新的狀態（即使出現錯誤），但我也可以看到，更改不會影響我的反應開發工具中的商店狀態。我該如何處理「無法讀取屬性'地圖'的未定義」react/redux

因此，這裏是我的減速器：

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

這裏是我的項目名單（從這裏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', 
}];

這裏是我的行動：

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

這裏是我的組件：

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);

我在哪裏錯了？我該怎麼辦？我不知道它是否有關，但我不能讓我的jsbin工作。

謝謝。

來源

2016-07-27 Simon Breton

testmovie未定義。你可以在你的代碼中加入一個調試器，然後打開chrome dev工具來檢查它。首先在你的movieTable函數中添加'debugger;'，當你在chrome中打開開發工具時，它會在該行暫停。 –

哼哼......我不明白。我沒有任何testmovie錯誤undefined。事實上，我可以看到與地圖功能'

{m.year}顯示電影列表 - {m.title}（{m.genre }） - {m。評分}

'我點擊按鈕時只有'未定義的錯誤'地圖'。 –

這是您的代碼中使用地圖的唯一地方。錯誤可能是來自redux或反應？您可以查看控制檯中的堆棧跟蹤，以瞭解錯誤發生的位置以及導致錯誤的原因。您可以通過在控制檯中單擊來擴展錯誤並查看堆棧跟蹤。 –

state.moviesReducer.items的初始狀態爲undefined。

在你減速export default function moviesReducer(state = {items}, action)，檢查這是哪裏items來源。當商店初始化時，最有可能是undefined。你可以給它的[]

初始值也可以通過在if語句包裹你的<ul>像

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

編輯避免這個問題：

它看起來像你的減速正確映射。所以總是定義state.moviesReducer。

，如果你的項目的初步名單甚至不正確加載，意味着你的items對象是造成錯誤。

如果您的初始列表正確加載，並且只有在您分派SET_MOVIE_FILTER操作後纔會出現錯誤，則意味着您的update(state.items, {$splice: [[1,3]]})正在改變您的狀態形狀。

我不知道你在哪裏得到這個update函數。但我猜你應該做return { items: update(state.items, {$splice: [[1,3]]})}

這就是我將如何去調試你的代碼。

來源

2016-07-27 23:47:43 xiaofan2406

你好。謝謝。我要更新我的文章，因爲我的問題似乎並不明確，但我對此感到失落。以下是我投入項目：'讓項目= {[ 標題： '瘋狂的麥克斯'，年：2015年，評級：8，流派： '幻想'， }，{ 標題：「蜘蛛俠2 」，年：2014年，評級：7，流派： '幻想'， }，等...， }];在你的根''combineReducers' –

，你有'moviesReducer'馬培德爲'moviesReducer 「究竟？ – xiaofan2406

是的。喜歡這個？ '常量todoApp = combineReducers（{ 待辦事項， visibilityFilter， tableFilter， moviesReducer， }）;' –

我該如何處理「無法讀取屬性'地圖'的未定義」react/redux

回答

相關問題