javascript - 使用 Object.assign 更新对象的内部元素

Question

我需要一些帮助来在我的 redux reducer 中使用 Object.assign 更新对象的内部元素。

为了更好地解释该场景，我使用 NBA 球队。我的 redux 商店中有一个 NBA 对象。我现在尝试仅更新特定团队的团队成员。我的 NBA 对象如下所示:

{
   teams: [
       {
          teamId: 123,
          teamName: "Los Angeles Lakers"
          teamMembers: [
             {id: "kbryant", fullName: "Kobe Bryant"},
             {id: "bingram", fullName: "Brandon Ingram"}
          ]
        },
        {
          teamId: 234,
          teamName: "Miami Heat"
          teamMembers: [
             {id: "cbosh", fullName: "Chris Bosh"},
             {id: "tjohnson", fullName: "Tyler Johnson"}
          ]
        }
   ]
}

我通过我的操作将 teamId 和members传递给reducer，即action.teamId和action.members。

这是我到目前为止所拥有的:

Object.assign({}, state, {
   nba: Object.assign({}, state.nba, {
      teams: Object.assign({}, state.nba.teams, {
         teamId[action.teamId] // I'm stuck here...
      })
   })
})

如何更新特定团队的团队成员？我知道我快到了，但需要一点帮助。谢谢。

Answer 1

您可以使用动态索引属性扩展您的代码，该属性旨在识别 teams 数组中的哪个条目需要更新。 ES6 语法允许在对象字面量中使用动态属性，方法是将动态表达式括在方括号中，如下所示:{ [index]: value }，其中 index 是变量或其他表达方式。

这是最终的解决方案:

function getNewState(state, action) {
    var index = state.nba.teams.findIndex( t => t.teamId == action.teamId );
    if (index == -1) return state; // team not found
    return Object.assign({}, state, {
        nba: Object.assign({}, state.nba, {
            teams: Object.assign([], state.nba.teams, {
                [index]: Object.assign({}, state.nba.teams[index], { 
                    teamMembers: action.teamMembers 
                })
            })
        })
    });
}

var state = {
    nba: {
        teams: [{
            teamId: 123,
            teamName: "Los Angeles Lakers",
            teamMembers: [
                {id: "kbryant", fullName: "Kobe Bryant"},
                {id: "bingram", fullName: "Brandon Ingram"}
            ]
        }, {
            teamId: 234,
            teamName: "Miami Heat",
            teamMembers: [
                {id: "cbosh", fullName: "Chris Bosh"},
                {id: "tjohnson", fullName: "Tyler Johnson"}
            ]
        }]
    }
};

var action = { teamId: 123, teamMembers: [{id: "lnance", fullName: "Larry Nance"}] };
var newState = getNewState(state, action);
console.log(newState);

.as-console-wrapper { max-height: 100% !important; top: 0; }

请注意，使用像 Immutable 这样的库，这种操作会变得容易得多。 .