REACT中出现条件后，如何将状态值重置为默认值

Question

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

此游戏应如何运行

1. 单击开始按钮播放
2. 胡萝卜和虫子会在野外繁殖(默认数量为10(。如果胡萝卜被点击，它就会被删除，如果我点击了一个bug，我就会输掉游戏
3. 游戏开始时计时器启动

我要做的事情

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

代码沙箱

Answer 1

这是更新代码

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

in react data flows unidimensional

我们需要让app.jsx知道发生了bug点击，并相应地重置。

在字段.jsx上

resetGame定义在app.jsx上

if (e.target.dataset.item === "bug") {
// On bug click
resetGame();  // 
setBugs([]);
setCarrots([]);
}

在App.jsx中

如果计时器已到，则在useEffect内部

if (sec <= 0) {
setShowPopUp(true);
setMessage(`Your score ${score}`);
}

在refresh图标上单击popup内部

const reStartGame = () => {
setShowPopUp(() => false);
stopGame();
};

注意：探索状态管理，如redux或反应上下文

Answer 2

如果你的应用程序越来越大，我认为对应用程序状态使用状态管理是个好主意。对于这个例子，我使用提供者作为我的状态管理：

import { createContext, useState, useEffect } from "react";
const DURATION = 5;
const initialState = {
start: false,
score: 0,
sec: 0,
reset: () => {},
startGame: () => {},
stopGame: () => {},
handleScore: () => {}
};
export const gameContext = createContext(initialState);
function GameProvider(props) {
const [score, setScore] = useState(0);
const [start, setStart] = useState(false);
const [sec, setSec] = useState(DURATION);
let timer;
const startGame = () => {
setStart(true);
};
const stopGame = () => {
setStart(false);
clearTimeout(timer);
};
const handleScore = () => {
setScore(score + 1);
};
const reset = () => {
setStart(false);
setScore(0);
};
useEffect(() => {
if (start && sec > 0) {
timer = setTimeout(() => {
setSec((sec) => sec - 1);
console.log(sec);
}, 1000);
}
return () => {
clearTimeout(timer);
};
}, [start, sec]);
return (
<gameContext.Provider
value={{ start, score, reset, startGame, stopGame, handleScore }}
>
{props.children}
</gameContext.Provider>
);
}
export default GameProvider;

当你想重置时，记得还要清除中的所有胡萝卜和错误

reset()
setBugs([]);
setCarrots([]);

工作代码sanbox：https://codesandbox.io/embed/carrot-game-forked-3pxqz?fontsize=14&隐藏导航=1&主题=深色