終極版推到一個嵌套的數組沒有突變狀態

Question

我有一個狀態對象，看起來像這樣：

PlaylistDictionary: { 
    someId: { 
    pages: [] // trying to push something to this array here 
    }, 
    someId2: { 
    pages: [] // trying to push something to this array here 
    }, etc 
} 

我試圖更新「頁面」數組，但我不斷收到一個錯誤說我」 m突變的狀態..我不明白，因爲如果我用Object.assign複製狀態對象...我如何改變狀態？感謝您的幫助

case types.ADD_PAGE_TO_PLAYLIST: { 
    let playlistDictCopy = Object.assign({}, state.playlistDict); 

    if (!playlistDictCopy[ action.playlistId ].hasOwnProperty('pages')) { 
    playlistDictCopy[ action.playlistId ].pages = []; 
    } 

    playlistDictCopy[ action.playlistId ].pages.push(action.pageId); 

    return Object.assign({}, state, { playlistDict: playlistDictCopy }); 
} 

Answer 1

你讓狀態對象的淺拷貝，你是不是複製任何屬性值的所有，包括數組本身，所以你的變異陣列。

您的.push調用會更改數組，並且由於您尚未創建新數組，因此也會影響以前存儲的所有狀態對象。

你可以做

playlistDictCopy[ action.playlistId ].pages = playlistDictCopy[ action.playlistId ].pages.concat([action.pageId]); 

或

playlistDictCopy[ action.playlistId ].pages = [ ...playlistDictCopy[ action.playlistId ].pages, action.pageId]); 

創建一個新的數組來代替。