Javascript 如何在react redux中使用spread运算符修改索引处的特定对象？

我想使用扩展运算符。场景是没有玩家（在UI上显示为玩家互动程序）。每当我点击任何一个播放器磁贴时，它就会变得活跃（突出显示）。条件是一次只能突出显示一个玩家。因此，当单击一个玩家磁贴时，其属性为

ifActive:true

，其余玩家属性为

ifActive:false

playerReducer

将被单击的玩家id作为

action.payload

（

action.payload

给出当前被单击的玩家id）。现在我必须修改我的

状态

，而不改变它。我必须使用扩展运算符。如何使用扩展运算符在索引处修改特定对象

const initialPlayerState = {
  tabs: [
    { id: 1, name: 'player 1', ifActive: false },
    { id: 2, name: 'player 2', ifActive: false },
    { id: 3, name: 'player 3', ifActive: false },
  ]
} 
const playerReducer = (state = initialPlayerState , action) => {
    switch (action.type) {
        case SELECT_PLAYER:
          //how to modify state using spread operator, and how to modify 
          //a specific object at a specific index.  
          return { ...state, /*some code hrere*/};
        default:
          return state;
    }
}

如何使用扩展运算符在索引处修改特定对象？严格地说，我必须使用排列操作符，每个玩家都应该有

ifActive

属性

---

如果您需要更新其中一个

播放器

，例如

ifActive

标志，并重新创建

选项卡

数组以触发选项卡组件的重新渲染，您可以这样做

    const initialPlayerState = {
      tabs: [
        { id: 1, name: 'player 1', ifActive: false },
        { id: 2, name: 'player 2', ifActive: false },
        { id: 3, name: 'player 3', ifActive: false },
      ]
    } 
    const playerReducer = (state = initialPlayerState , action) => {
        switch (action.type) {
            case SELECT_PLAYER:
              return { 
                ...state, // If you have something else in your state
                tabs: tabs.map(player => player.ifActive || player.id === action.id ? {
                  ...player,
                  ifActive: player.id === action.id
                } : player)
              };
            default:
              return state;
        }
    }

---

这是错误的，因为您正在使用拼接来变异

选项卡

，而

选项卡

是旧状态的一部分，需要保持不变。您应该使用

切片

，而不是

拼接

。这也是错误的，因为您无法取消设置上一个

i活动

。对于

拼接

，我的错，谢谢。您对

ifActive

标志的更新不正确，这是对的。@DDS好吧，因为我对React Redux非常陌生，我不太清楚您的意思。你能详细地告诉我该做些什么吗。这将是很大的帮助。

return { ...state, players: state.players.map(player => ({ ...player, selected: player.id === action.id })) };