如何在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>