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}
       }
   })
}

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

2 个答案: