时间戳

首页 > 解决方案 > 如何在 React 中更新数组中的状态变量？

reactjs - 如何在 React 中更新数组中的状态变量？

问题描述

name我有这种状态，我想以location动态方式更新属性。

this.state = {
  players: [{
    name: '',
    location: ''
  },
  {
    name: '',
    location: ''
  }]
}

这个想法是您可以单击一个按钮来添加另一个/删除一个播放器。每个玩家，应该出现这些输入字段（我实现了），但我无法更新更改状态。

最好是这样的（但我无法使其适用于这种特殊情况）。当然，除非有更好的方法来实现这一点（我是 React 的新手）。

this.handleChange = (event) => {  let obj = {...this.state.obj }; obj [event.target.name] = event.target.value; this.setState({obj }); }

任何帮助将不胜感激！

标签： reactjs

解决方案

您可以将临时 id 值添加到播放器列表中，并在更改时传递目标 id 和字段更改，并相应地更改状态 


const onPlayerChange = ({target : { id , name , vlaue}}) =>{
   const newPlayersState = this.state.players.map(player=>{
      if(player.id === id) return {...player,[name]:value}
      return player;
   })
   this.setState({players:newPlayersState})
}

推荐阅读