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

M_W

我知道这个问题已经被提出并回答了,但是我似乎无法获得预期的输出。

let ranNum = 0;

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

当我运行此程序时,我的chrome浏览器会不断生成随机数,直到我停止程序为止。我也尝试过setInterval。我想发生的是每5秒生成一个随机数,并将其添加到代码中的另一个变量中。(因此,此变量应每5秒显示一个不同的数)。我正在客户端-React.js中进行此操作,并且想知道是否还有另一种方法可以通过react进行此操作。感谢你的帮助!

朱利安·克莱恩(Julian Kleine)

您可以使用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/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档