Javascript 在React without eval（）中使用模板文本向setState动态添加值

我是React的新手，正在尝试创建一个记分板应用程序，该应用程序具有以下状态：

state = {
    home_team: [
      {
        id: 1,
        name: "Jobe Watson",
        goals: 0,
        behinds: 0,
      },
      {
        id: 2,
        name: "James Hird",
        goals: 0,
        behinds: 0,
      },
      {
        id: 3,
        name: "Steven Alessio",
        goals: 0,
        behinds: 0,
      },
      {
        id: 4,
        name: "Che Cockatoo-Collins",
        goals: 0,
        behinds: 0,
      }
    ],
    away_team: [
      {
        id: 1,
        name: "Chris Judd",
        goals: 0,
        behinds: 0,
      },
      {
        id: 2,
        name: "Anthony Koudafidis",
        goals: 0,
        behinds: 0,
      },
      {
        id: 3,
        name: "Steven Silvagni",
        goals: 0,
        behinds: 0,
      },
      {
        id: 4,
        name: "Brendan Fevola",
        goals: 0,
        behinds: 0,
      },
    ]
  }

我正在尝试运行分数更改功能，如下所示：

addScore = (i, delta, team, score) => {
    const val = eval(`this.state.${team}[${i}].${score} += ${delta}`)
    console.log(val)
    this.setState( {
        [score]: val
    })
  }

在计数器组件中调用，如下所示：

onClick={()=>addScore(index, +1, team, 'goals')

在这种情况下，“索引”是指任一团队数组中的球员索引，“团队”是指“主队”或“客队”

我能够动态地将信息添加到setState方法中的唯一方法似乎是通过将模板文本添加到eval（）中，然后在setState中调用它

知道eval（）有问题-还有其他方法吗？我尝试使用new Function（）（），但没有成功

---

有人能提供另一种解决方案吗？提前感谢。

我想您对如何通过所有可用变量获取访问值有点困惑，以下是简单的方法：

// this.state.${team}[${i}].${score}

this.state[team][i][score]

第二，您正在改变不应该改变的状态，您可以像这样更新状态：

addScore = (i, delta, team, score) => {
    const updated = this.state[team].map((el,index) => {
        if(i=== index) {
            const score = el.score + delta;
            el = { ...el , score }
        }
        return el
    })

    this.setState((state) => {
        ...state ,
        [team] : updated
    })
}

---

只需克隆您的值，编辑并设置您的状态这是否回答了您的问题

eval（`this.state.${team}[${i}].${score}+=${delta}`）

这会改变状态，而且，使用索引而不是生成的标识符会使编辑变得困难。例如，每一个新的结果，即使你希望它显示在列表的顶部，也会被放置在react的底部。Vivek-非常感谢-每个其他建议都没有剪切它，但我使用了你的建议和下面的编辑，解决了我的问题<代码>addScore=（i，delta，team，score）=>{const updated=this.state[team].map（（el，index）=>{if（i===index）{el[score]+=delta；el={……el，score}}return el}）this.setState（（prevState）=>{……prevState[team]：updated}}