如何在嵌套的Javascript对象上使用展开运算符？

Question

我正在尝试更新redux状态的一部分，其中包含另一个对象内嵌的两个对象。通常在不可变地更新javascript对象时，我会使用扩展运算符，然后按如下方式定义任何更改：

state = {...state, property1: newvalue} 

然而，我不确定如何在嵌套对象中使用扩展运算符。以下是相关代码和我的尝试：

const squadDatabase = {currentSquad: {
    0: null,
    1: null,
    2:null

    }, newAdditions: null}

export default (state=initial_squad, action)=>{

    switch(action.type){
        case ADD_PLAYER_TO_SQUAD:
            return {...state, currentSquad[action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId, newAdditions: action.payload.newSquadAdditionId}
        default:
            return initial_squad
    }
}

有人知道如何使用扩展运算符或其他方法来不可变地更新嵌套的JavaScript对象吗？

- Sean

---

{...state, currentSquad: {...state['currentSquad'], [action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId}, newAdditions: action.payload.newSquadAdditionId} - Shivam Gupta

这个回答解决了你的问题吗？使用动态属性对嵌套的JavaScript对象进行分组的扩展语法 - Heretic Monkey

Answer 1

基本上，您需要添加第二层对象（状态）解构。

return {
   ...state, // first nesting level spread
   currentSquad: {
      ...this.state.currentSquad, // second nesting level spread
      currentSquad[action.payload.currentSquadMemberId]: action.payload.newSquadAdditionId, 
   },
   newAdditions: action.payload.newSquadAdditionId,
};

- kind user