更新嵌套数组 React 中的对象值

Question

我正在尝试更新 React 应用程序的状态对象中的值。我能够更改状态字符串，但我似乎无法弄清楚如何访问每个战士的 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
    })
  }
  
 }

Answer 1

你需要确保return一个与原始状态相同形状的对象，同时还要避免突变。这里 spreading 当前状态进入一个新对象，更新 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)
  })
}

更新嵌套数组 React 中的对象值

Updating an object value in nested array React

javascript

arrays

object

node.js

reactjs