我正在嘗試更新 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
})
}
}
uj5u.com熱心網友回復：
您需要確保回傳與原始狀態相同形狀的物件，同時還要避免突變。這里將當前狀態傳播到一個新物件中，status像以前一樣更新字串，然后使用map()呼叫迭代fighters陣列并更新與event.target.
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)
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/485962.html
標籤：javascript 节点.js 数组 反应 目的
下一篇：回圈一個物件只回傳第一個物件