（React.js）随机生成的初始状态。每次处理事件时如何防止它重新生成？

Question

我正在建造一个players可以轮流互相攻击的游戏。首先，我手动设置name，job并在life中随机生成damage，magic，componentWillMount()。

我希望每次提交攻击表格时，都会减少被攻击者的生命。但现在每次提交时，整个状态都会重新生成（带有各种错误）。

我可以做些什么来解决它吗？

app.js：https://ghostbin.com/paste/ype2y

attack.js：https://ghostbin.com/paste/wzm3m

Answer 1

我注意到你做了很多：

let players = this.state.players

你不应该这样做。 Array是js中的一个对象，所以在这里你通过引用传递。这意味着var players的每个修改实际上都有副作用，并修改了你永远不应该做的状态。我通常建议永远不要使用像in-place这样的splice操作，并始终使用状态的副本。在这种情况下，你可以这样做：

let players = this.state.players.slice()

从那时起对players var的任何修改都不会影响状态。仔细检查您在代码中的其他任何位置都没有这样做。最重要的是，您应该仅使用构造函数来设置和启动您的状态。否则，每次调用componentWillMount方法时，都会重新生成状态，这可能不是您期望的行为。

修改

我认为我可以为你提供更多关于你试图用数组做什么的指示，作为一般的经验法则，我遵循这种方法。如果我的新状态有一个数组字段是前一个的子集，那么我使用.filter方法，如果我的新状态的数组需要更新它的一些条目，那么我使用.map方法。为了举例说明玩家删除，我会这样做：

handleDeletePlayer(id) {
  this.setState(prevState => ({
    players: prevState.players.filter(player => player.id !== id)
  }));
}

Answer 2

您的初始状态应该在constructor中生成。这只进行一次，并且在更新组件道具时不会重复。