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}
]

我的完整减速机就像这样

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

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 );的组合：

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

以上内容可以使用ES6 Spread语法编写，如下所示：

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)
            ]
        }
    }
}

编辑，考虑到您最近的问题更新，您的减速机应该是这样的这样：
virtual

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

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

2 个答案: