如何在 React.js 中每 5 秒生成一个随机数？

Question

我知道这个问题已经被问到并得到了回答，但我似乎无法获得预期的输出。let ranNum = 0;setTimeout(function(){     ranNum = Math.floor((Math.random()*100)+1); }, 5000);当我运行这个程序时，我的 chrome 浏览器不断生成随机数，直到我停止程序。我也用 setInterval 试过这个。我想要发生的是每 5 秒生成一个随机数并将其添加到我的代码中的另一个变量。（所以这个变量应该每五秒显示一个不同的数字）。我正在我的客户端 - React.js 中执行此操作，并且想知道是否有另一种方法可以通过 React 执行此操作。感谢你的帮助！

Answer 1

您可以使用useEffect钩子来设置间隔并更新状态，然后显示状态

const RandomNumber = () => {

  const [number, setNumber] = React.useState(0);

  

  // add side effect to component

  React.useEffect(() => {

    // create interval

    const interval = setInterval(

      // set number every 5s

      () => setNumber(Math.floor(Math.random() * 100 + 1)),

      5000

    );

    // clean up interval on unmount

    return () => {

      clearInterval(interval);

    };

  }, []);

  return <p>{number}</p>;

};

ReactDOM.render(<RandomNumber />, document.getElementById("root"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

<div id="root"></div>