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

Question

I know this question has already been asked and answered, but I can't seem to get the expected output.

let ranNum = 0;

setTimeout(function(){   
  ranNum = Math.floor((Math.random()*100)+1); 
}, 5000);

When I run this my chrome browser keeps generating random numbers over and over until I stop the program. I tried this with setInterval too. What I want to happen is to generate a random number every 5 seconds and add that to another variable in my code.(so this variable should display a different number every five seconds). I'm doing this in my client side - React.js and was wondering if there's another way to do this with react. Appreciate your help!

Answer 1

You can use a useEffect hook to set the interval and update a state, then display the state

 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>