React Native 更新状态中嵌套对象的单个属性

Question

我正在尝试更新嵌套状态对象的单个属性并将其返回到状态。我有需要更新的对象的索引，但我正在努力更改一个属性并将新对象添加回状态。

我的状态对象看起来像这样，我正在尝试减少玩家按下按钮时的生命值。

我一直在使用数组过滤器，尝试复制对象并将其添加回状态，但这会丢失对象位置。

this.state = {
  players: {
    {id: 1, lives: 3, name: something},
    {id: 2, lives: 3, name: something}
  }
} 

public removeLife(id): void {
   const player = this.state.players[id];
   player.lives = player.lives - 1;
   this.setState({players[id]: {...player}
   })
}

任何帮助将不胜感激。

Answer 1

在做了一些研究之后，我发现在嵌套状态中更新单个对象的最佳方法是浅拷贝状态，更改对象然后将浅显状态对象重新分配回状态。像这样：

    public removeLife(event, id): void {
    const newState = Object.assign([], this.state.players);
    const indexOfPlayer = newState.findIndex(selectedPlayer => selectedPlayer.id === id);
    const player = newState[indexOfPlayer];

    player.lives = player.lives - 1;

    this.setState({players: newState})
}

Answer 2

因为您的 state 包含一个对象对象，我建议您将其设为对象数组：

this.state = {
  players: [
    {id: 1, lives: 3, name: something},
    {id: 2, lives: 3, name: something}
  ]
}

您需要像这样处理更新（例如更新索引 1 中的播放器）：

this.setState({
    players: {...this.state.players, 
       players[1]: {...this.state.players[1], lives: this.state.players[1].lives + 1 }
    }
})

或尝试一下（我遵循你的功能）：

public removeLife(id): void {
   const player = this.state.players[id];
   player.lives = player.lives - 1;
   this.setState({players: {
       ...this.state.players,
       players[id]: {...player}
       }
   })
}