循环与循环无限使用中断?反应Js

Question

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

我想要的是进行验证。如果ScoreDealer变量的值小于ScorePlayer变量的值，我希望它在其中添加更多元素(ScoreDealer(，但我不希望元素的总和超过21的值。

我使用了 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 返回以前的值，因为尚未应用挂起的状态更新。

在循环中调用 setState 仅更新状态 1 次

您的应用程序一直挂起的原因是 this.state 的值尚未更新，并且在finishGame完成执行之前不会更新，以及上面评论中@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});
}

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