reactjs - 如何修复反应蛇游戏中的setState异步错误

Question

我建立了一个反应蛇游戏，我发现了一个错误。当我用 移动蛇时onkeydown()，在某些情况下，我会得到一个不应该发生的错误。

当蛇的长度大于 2 并且用户单击箭头键，然后非常快速地单击与原始方向相关的相反键时，就会发生这种情况。

例如：用户向左移动然后单击--> 向下--> 向右。蛇应该像快速“掉头”一样移动，而不是向右移动（跳过键）。又因为蛇的方向是向左，所以右边是蛇身。因此，游戏没有掉头，而是因为蛇自己相撞而失败。

我想提一下，我使用 if 语句 (in ChangeDirection()) 来避免当蛇的方向向左时，它立即向右移动，以避免蛇自己碰撞。但在这种情况下，用户通过快速向下单击 --> 右来覆盖此限制。

为什么会发生这种情况？这是因为 setState 是异步函数吗？我怎么解决这个问题？

你可以在这里看到这个项目：

https://codesandbox.io/s/epic-benz-jg9xh

标签： reactjsasynchronoussetstate