在 reactjs 中生成随机数动画并将随机数与输入数进行比较的最佳方法是什么？

Question

我想在这里发生的是每隔50ms 显示一个随机数，然后在 5 秒后停止，创建动画随机数的效果。然后将最后生成的随机数与用户输入的数字进行比较。如果生成的最后一个随机数等于用户的输入，那么它将执行类似 console.log 的操作

这里的问题是即使生成的最后一个随机数等于用户的输入，代码也不会做任何事情。

在 reactjs 中生成随机数动画并将随机数与输入数进行比较的最佳方法是什么？ （比如使用 if 语句比较随机数是否等于输入数）

  const [randomNumber, setRandomNumber] = useState(0);
  const [toggle, setToggle] = useState(false);

  const [inputNum, setInputNum] = useState(0);

  useEffect(() => {
    let counter;
    if (toggle) {
      counter = setInterval(
        () => setRandomNumber(Math.floor(Math.random() * 10)),
        50
      );
    }
    return () => {
      clearInterval(counter);
    };
  }, [toggle]);

  const handleGenerateNumber = () => {

    setToggle(true);
    setTimeout(() => {
    setToggle(false);
    
    }, 5000);

    if (inputNum === randomNumber) {
      console.log(randomNumber, "you won");
    }
  };

Answer 1

if statement 有误。它必须在setTimeout 块中。 演示：https://codesandbox.io/s/dreamy-booth-ddtni