在 .forEach 循环中使用变量名答案

【问题标题】：Using name of variable in .forEach loop在 .forEach 循环中使用变量名
【发布时间】：2019-09-25 23:40:40
【问题描述】：

我正在使用 JS/React，我目前将数组嵌套到数组中。结构如下：

const ezra = ["Patriots", "Bears", "Vikings", "Titans", "Jets", "Bengals"]
const adam = ["Chiefs", "Cowboys", "Packers", "Ravens", "Broncos", "Cardinals"]

const playerList = [ezra, adam]

我也有如下定义的 React 状态：

this.state{
   ezraWins: 0
   adamWins: 0
}

我正在从 React 中提取数据并使用 playerList.forEach 来统计每个玩家所在球队的总胜场数。我想找到总数和 .setState 以将 ${player}Wins 的值更改为总数。 IE 当我计算我想要的以斯拉队的胜利时：

this.setState({ezraWins: counter})

这是我认为它可能如何工作的一个愚蠢的例子：

 playerList.forEach((player) => {
      const playerWins = `${player}Wins`
      const playerVariable = `${player}`
      //  use loop to tally total wins, add that to counter variable

      this.setState({${playerWins} : counter})

但是当我 console.log 这些变量时，我得到：

playerList = Patriots,Bears,Vikings,Titans,Jets,BengalsWins

playerVariable = Patriots,Bears,Vikings,Titans,Jets,Bengals

我有什么方法可以提取 playerList 中每个数组的名称并将其用于我的代码中的 .setState 命令？我也尝试使用 window 进行一些处理，但收到了一个我没有写下来的错误，可能是因为我没有将 playerList 和其中的每个数组设为全局。这是解决方法还是有更好的方法？我的理解是全局变量是不行的。

【问题讨论】：

看起来您正在尝试不在字符串中进行字符串插值。不过，我不完全确定你想得到什么。
做你的工作，然后打电话给setStatelast。连续调用setState 十次覆盖九次计划状态更新，只有最后一次会“通过”。此外，如果您想根据某个变量的值（例如a = 'cow'; b = { [a]: 'moo' };）设置对象属性名称，则需要使用[]
@Mike'Pomax'Kamermans 让我走到了一半，我正在尝试 setState 并且它没有在我的开发工具下显示所需的值。我在为每个玩家计数后尝试 this.setState({ [playerName] : counter }) ，我相信这是正确的语法吗？我会从头到尾做一些调查，但如果你发现任何明显的错误，我很想知道！
不要为每个玩家调用 setState。创建一个像update = {} 这样的聚合对象，然后在forEach 中更新that，然后在循环之后调用setState(update)。
@Mike'Pomax'Kamermans 我正在尝试使用数组 setData = [] 我正在更新。尝试将整个内容硬编码为 setState({ ezraWins: setData[0], adamWins: setData[1]}) ，但这也不起作用。不知道为什么，但我离话题太远了，我会玩它，如果我想不通，我会问另一个问题。不过，我希望你能回答一个随机问题：

标签： javascript arrays reactjs variables

【解决方案1】：

这里的问题是您只是将玩家名称用作变量名称。

尝试像这样保存玩家名称：

const ezra = {name: "ezra", teams: ["Patriots", "Bears", "Vikings", "Titans", "Jets", "Bengals"]}

并像这样分配 playerWins 和 playerVariable：

const playerWins = `${player.name}Wins`
const playerVariable = `${player.name}`

希望对你有帮助。

【讨论】：

所以要访问我会使用 ezra.teams 的团队，以及名称 ezra.name 对吗？让我玩一下，看看会发生什么。
让我成功了，但 setState 仍然存在问题，但至少在控制台中我正在记录正确的变量名称和值。我希望避免使用 JS 对象作为答案，但这可能是最简洁的方法。
嗨，太好了。实际上，我并不完全知道您要达到的目标。但现在我看到您试图使用 ezra 变量名作为值。正如我所看到的，这不可能在 js 中实现，这就是为什么我建议您更改代码的原因。至于 Mike 'Pomax' Kamermans 建议的 forEach 语句中的代码，您应该使用括号 {[playerWins] : counter} 将 playerWins 中的值用于新属性，并在完成循环后调用 setState ，因为它将替换状态每次迭代的值。再见
是的，部分原因是我是新手，不知道如何正确提问。如果我这样做了，我可能已经想出了一个解决方案。你不知道你不知道我想的一个经典案例。感谢您帮助我完成解决方案，您将我的变量通过数组转换为 JS 对象的建议实际上是一个很大的贡献！

【解决方案2】：

我进行了大量的重组，但我找到了一种更好的方法来实现相同的结果，方法是将我的所有数据放入状态中。我的最终状态如下所示：

          ezra: {name: "ezra", wins: 0, 
            teams: ["Patriots", "Bears", "Vikings", "Titans", "Jets", "Bengals"]},
          adam: {name: "adam", wins: 0, 
            teams: ["Chiefs", "Cowboys", "Packers", "Ravens", "Broncos", "Cardinals"]}

根据 Mike 'Pomax' Kamermans 的建议，我在函数开始时制作了 this.state 的完整副本：

let updateState = Object.assign({}, this.state)

并将我的获胜总数复制到 updateState 变量中，如下所示：

updateState[player.name].wins = counter

其中 player 是每个玩家的状态对象的副本，即 this.state.adam。可能有比我的约定更好的方法来引用特定的状态对象，我给它一个与状态变量名称相同的名称道具。然而，这是我现在知道的最好的方法。

最后，在我遍历所有获胜总数并将它们更新为 updateState 之后，我使用以下命令更新了整个 this.state：

this.setState(updateState)

无论如何，只要写下我是如何解决这个问题的，以防有人偶然发现这个试图完成与我类似的任务。我的解决方案与我原来的问题/代码相差甚远，但我认为这是一种明显更好的方法。

【讨论】：