如何在 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 = () => {&nbsp; const [number, setNumber] = React.useState(0);&nbsp;&nbsp;&nbsp; // add side effect to component&nbsp; React.useEffect(() => {&nbsp; &nbsp; // create interval&nbsp; &nbsp; const interval = setInterval(&nbsp; &nbsp; &nbsp; // set number every 5s&nbsp; &nbsp; &nbsp; () => setNumber(Math.floor(Math.random() * 100 + 1)),&nbsp; &nbsp; &nbsp; 5000&nbsp; &nbsp; );&nbsp; &nbsp; // clean up interval on unmount&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, []);&nbsp; 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>