setState inside setTimeout react hooks

Question

我目前正在尝试构建一把剪刀布石头布，我打算实现的是这个逻辑： 点击开始按钮后，玩家有 3 秒的时间选择武器，如果没有，将为玩家随机选择武器。

问题： 当我在 3 秒内选择武器时，它工作得很好。但是，当我故意让 setTimeout 触发时，它不会自动更新状态。我怀疑如果不满足条件，但我不知道为什么会这样。

以下是代码片段：

//custom hooks//
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
const weapons= ['rock', 'weapon', 'scissors']
const App = () => {
const [p1Weapon, setp1Weapon] = useState("");
const prevWeapon = usePrevious(p1Weapon);
const getPlayerTimeout = (playerRef, setPlayer, time) => {
setTimeout(() => {
if (playerRef === "") {
setPlayer(weapons[Math.floor(Math.random() * weapons.length)]);
}
}, time);
};
const startGame = () => {
getPlayerTimeout(prevWeapon, setp1Weapon, 3000);
}
return (
...
<div>
<button
className="weaponBtn"
onClick={() => {
setp1Weapon("rock");
}}
>
rock
</button>
<button className="weaponBtn" onClick={() => setp1Weapon("paper")}>
paper
</button>
<button className="weaponBtn" onClick={() => setp1Weapon("scissors")}>
scissor
</button>
<button type="button" onClick={startGame}>
Start!
</button>
</div>
)

谢谢！

Answer 1

如果你只想在 x 时间后设置一个状态，你可以像这样非常轻松地做到这一点

this.setState({isLoading: true},
()=> {window.setTimeout(()=>{this.setState({isLoading: false})}, 8000)}
);

这应该在 8 秒后将 isLoad 的值设置为 false。

我希望它有所帮助