javascript - Redux 推送到嵌套数组而不改变状态

Question

我有一个如下所示的状态对象:

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

我正在尝试更新“pages”数组，但我不断收到错误消息，说我正在改变状态..我不明白，因为如果我使用 Object.state 复制状态对象。分配...我如何改变状态？感谢您的帮助

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

创建一个新数组。