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秒钟后将isLoading的值设置为false。

我希望对您有帮助

setTimeout内的setState反应钩子

1 个答案: