javascript - 如何在 React.js 中每 5 秒生成一个随机数?
问题描述
我知道已经提出并回答了这个问题,但我似乎无法获得预期的输出。
let ranNum = 0;
setTimeout(function(){
ranNum = Math.floor((Math.random()*100)+1);
}, 5000);
当我运行它时,我的 chrome 浏览器会一遍又一遍地生成随机数,直到我停止程序。我也用 setInterval 试过这个。我想要发生的是每 5 秒生成一个随机数并将其添加到我的代码中的另一个变量中。(所以这个变量应该每 5 秒显示一个不同的数字)。我在我的客户端做这个 - React.js 并且想知道是否有另一种方法可以通过反应来做到这一点。感谢你的帮助!
解决方案
您可以使用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>
推荐阅读
- c++ - 有没有什么简单的方法可以在 C++ 中将输入存储在向量中,除了我在下面实现的那个?
- visual-studio - 调用方法 CsSCript Notepad++
- encryption - GPG执行顺序
- wordpress - ACF 中继器 - 应用不同的行最后一个中继器
- r - 使用填充的geom_bar中未对齐的条
- android - 我无法在两个活动之间传输数据
- javascript - 为什么解构分配不能正常工作?
- google-cloud-run - 通过在 GCP 中配置负载均衡器映射域后,我应该如何解决“错误请求 (400)”错误?
- c - V4l2 未找到连接的设备 (VIDIOC_S_FMT)
- python - 在 Django 的 urllib.quote 中发送换行符