如何在 while 循环内更改 React 状态变量？

Question

我对 React 和 Web 开发总体来说是新手。我设法找到解决问题的方法，但问题本身仍然让我困惑。我希望得到深入的解释或指出我可以在哪里了解更多信息，谢谢！

const [score, setScore] = useState(0);
const drawCard = async()=>{
    while (score < 20){
        const card = await deal(); //deal function fetches cards from deckofcards api
        const value = card.value; //syntax isn't correct but say I access it's int value
        setScore(score=> score+ value); //or setScore(score + value); both didn't work
        //other code, add to my deck etc...
    }
}

当我尝试调试这个时，我发现分数在循环中没有更新，我猜它与异步性质有关，或者可能与某些反应事件循环有关？感谢您的帮助！

我设法通过在 while 循环外部创建一个临时变量来存储值，然后一次性 setScore 该变量来实现此功能，并且效果很好。但我很好奇为什么这不起作用。

Answer 1

试想一下，如果在每次循环中函数处理后更新分数，组件将重新渲染，然后将创建一个新的 while 循环，将会有越来越多的 while 循环，太上镜了，所以反应不会立即在循环中更新数据为了避免这种情况，我写了一个演示如果这是你想要的。