从嵌套对象的数组中删除元素？

Question

我该怎么做？我的店铺是这样的：

{
   ...,
   playlist : [
      ...,
      {
          id : 1,
          title :  "fancy-playlist-title",
          songs : [
             { id : 1 },
             { id : 2 },
             ... and so on
          ]
      }
   ]
}

我有这个减速器：

if(action.type === "REMOVE_FROM_PLAYLIST"){
        return {
            ...state,
            playlist : [
                ...state.playlist,
                ...state.playlist[action.index].songs.splice(0, action.indexSongs),
                ...state.playlist[action.index].songs.splice(action.indexSongs+1)
            ]
        }
    }

更新

每个播放列表可以有无限的歌曲，因为播放列表数组包含很多这样的播放列表对象

playlist : [
   {
      id : 1,
      title : "title",
      songs : []
   },{
     id : 2,
     title : "playlist 2",
     songs : []
   },
   {... and so on}
]

我的完整reducer是这样的

export default function(state = {}, action) {

if(action.type === "REMOVE_FROM_PLAYLIST"){

        //action.index : current index of playlist
        //action.indexSongs : current index of song that I want to delete from current playlist

        let playlist = state.playlist[action.index].slice(0, action.index).concat(state.playlist[action.index].slice(action.index + 1));
        return {
            ...state,
            playlist : [
                ...state.playlist,
                ...playlist.slice(0, action.indexSongs),
                ...playlist.slice(action.indexSongs + 1)
            ]
        }
    }

return state;
}

我的问题是如何删除一个播放列表中的一首歌曲？我正在发送当前播放列表的索引和当前播放列表的歌曲索引。

Answer 1

splice 改变数组状态，你不应该这样做。

你想要的是 slice 和 concat 的组合：

playlist.slice(0, indexOfSong)  // copy a portion of the array
                                // from the start to the indexOfSong

        .concat(                // concatenate it with:

          playlist.slice(indexOfSong + 1)
                                // copy of a portion of the array from
                                // the index just after indexOfSong
                                // to the end of the playlist
        );

上面可以用 ES6 Spread 语法写成如下：

[
  ...playlist.slice(0, indexOfSong)
  ...playlist.slice(indexOfSong + 1));
]

编辑，考虑到您最近的问题更新，您的减速器应该看起来像 这个：

export default function(state = {}, action) {

if(action.type === "REMOVE_FROM_PLAYLIST"){
  return {
            ...state,
            playlist : [
                ...state.playlist,
                ...playlist[action.index].songs.slice(0, action.indexSongs),
                ...playlist[action.index].songs.slice(action.indexSongs + 1)
            ]
        }
    }
}

Answer 2

如果你使用 lodash，你可以使用 _.merge

https://lodash.com/docs/4.17.2#merge

if(action.type === "REMOVE_FROM_PLAYLIST"){
    let newPlaylistWihoutDeletedItem = state.playlist.splice(action.index, 1);

    return _.merge({}, state, {
      playlist: newPlaylistWihoutDeletedItem
    });
}