我正在用React JS构建一个简单的查找胡萝卜游戏。

这个游戏应该如何工作

1. 单击开始按钮播放
2. 胡萝卜和虫子将产卵到字段（默认计数为10）。如果胡萝卜被点击，它将被移除，如果我点击一个bug，我将输掉游戏。
3. 游戏开始时计时器开始

我尝试做的事情

如果我点击一个bug，点击停止按钮，或者我不能在这段时间内找到所有的胡萝卜，我希望我的状态重置为默认状态。有没有更好的方法来构造像startGame、stopgame这样的函数？

codesandbox

---

顺晟科技：

我认为如果你的应用程序变大了，对你的应用程序状态使用状态管理是个好主意。 在本例中，我使用一个提供程序作为状态管理:

in react data flows unidimensional

当您想要重置时，请记住还要清除所有的胡萝卜和bug

in react data flows unidimensional

工作CodeSanBox： https://codesandbox.io/embed/carrot-game-forked-3pxqz？fontsize=14&hidenavigation=1&theme=dark

以下是更新代码

https://codesandbox.io/s/carrot-game-forked-64cbw？file=/src/app.jsx

我们需要通知发生了单击并相应地重置。

field.jsx

上的

在

上定义

in react data flows unidimensional

在app.jsx中

如果计时器已启动，则在

in react data flows unidimensional

在图标上单击内部

in react data flows unidimensional

注意:查看状态管理类似或反应context