(React.js )初始状态随机生成。如何防止它在我每次处理事件时重新生成？

Question

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

希望每次提交攻击表格，都能减少被攻击者一定的生命值。但是现在每次提交都会重新生成整个状态（各种bug）

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

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

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

Answer 1

您的初始状态应在 constructor 中生成。此操作仅执行一次，并且在组件属性更新时不会重复执行。

Answer 2

我注意到你做了很多：

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)
  }));
}

(React.js )初始状态随机生成。如何防止它在我每次处理事件时重新生成？

(React.js )Initial state generated randomly. How to prevent it from regenerate each time I handle an event?

javascript

lifecycle

frontend

reactjs