使用Break进行循环无限循环？反应式

Question

会发生什么：我有这两个变量：ScorePlayer 和ScoreDealer，它们是它们各自的主数组中包含的元素之和的结果cardsPlayer 和cardsDealer。

而我想要做的是验证。如果ScoreDealer 变量的值小于ScorePlayer 变量的值，我希望它在其中添加更多元素（ScoreDealer）但我不希望元素的总和超过@ 的值987654328@.

我使用了 Break 方法，但无限循环继续并挂起应用程序。

执行此操作的函数：

finishGame = () => {
  const scorePlayer = this.state.cardsPlayer.reduce((a, b) => a + b);

  const scoreDealer = this.state.cardsDealer.reduce((a, b) => a + b);

  for (let i = scoreDealer; scoreDealer < scorePlayer; i++) {

    this.setState({
      cardsDealer: this.state.cardsDealer.concat(this.state.cards.splice(0, 1))
    })

    if (scoreDealer === 21) {
      break;
    }
  }
}

谁能帮帮我？

Answer 1

rossipedia 在这篇文章中说它是完美的。

不要在循环中调用 setState。这里发生的事情正是文档所指的：this.state 正在返回以前的值，因为尚未应用挂起的状态更新。

Calling setState in a loop only updates state 1 time

您的应用一直挂起的原因是 this.state 的值尚未更新，并且在 finishGame 执行完毕之前不会更新，以及上面 cmets 中 @Jayce444 所述的一些有缺陷的逻辑。

在保留大部分逻辑的同时我会使用的解决方案是这样的

finishGame = () => {
    // this is a copy of your array given I'm assuming its a 1D array and you can now mutate it
    const cardsDealer = [...this.state.cardsDealer];
    // if you chose to update scorePlayer you should declare it as let.
    const scorePlayer = this.state.cardsPlayer.reduce((a, b) => a + b);
    let scoreDealer = this.state.cardsDealer.reduce((a, b) => a + b);

    for (let i = 0; scoreDealer < 21; i++) {
        scoreDealer += cardsDealer.shift();

        // this will stop if card is >= to 21
        if (scoreDealer >= 21) {
            break;
        }
    }
    // this will set your cards to the new values after the loop is done running.
    this.setState({cardsDealer});
}

鉴于上述函数需要进行大量微调，我希望它能让您有一个良好的开端。编码愉快！