[英]Updating an object value in nested array React
我正在尝试更新 React App 的状态对象中的值。 我能够更改状态字符串,但我似乎无法弄清楚如何访问每个战斗机的 hp 密钥 - 我尝试了不同的方式(我在这个例子中写了 2)但没有任何成功。 当您有一个包含嵌套对象的数组时,访问每个战斗机的键的正确方法是什么?
export default class App extends Component {
state = {
status: 'Fighters are Ready...',
fighters: [
{
name: 'Fighter 1',
hp: 150,
image: ''
},
{
name: 'Fighter 2',
hp: 150,
image: ''
}
]
}
handleClick = (e) => {
// console.log(e)
if (e.target.name === 'Fighter 1') {
this.setState({
hp : this.state.fighters[1].hp - 10,
status: e.target.name + ' is attacking ' + this.state.fighters[1].name
})
} else {
this.setState({
[Object.keys(this.state.fighters)[0].hp] : this.state.fighters[0].hp - 10,
status: e.target.name + ' is attacking ' + this.state.fighters[0].name
})
}
}
您需要确保返回与原始状态相同形状的对象,同时还要避免突变。 这里将当前状态传播到一个新对象中,更新status
字符串,然后使用map()
调用迭代fighters
数组并更新与event.target
匹配的 fighter。
handleClick = (e) => {
// console.log(e)
this.setState({
...this.state,
status: e.target.name + ' is attacking ' + this.state.fighters.find(f => f.name !== e.target.name)?.name,
fighters: this.state.fighters.map(fighter =>
fighter.name !== e.target.name
? ({ ...fighter, hp: fighter.hp - 10 })
: fighter)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.