如何在嵌套的 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 对象？

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

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

How to use spread operator on nested javascript objects?

javascript

object

spread

reactjs

redux