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

Question

我知道这个问题已经被问及回答，但我似乎无法得到预期的输出。

let ranNum = 0;

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

当我运行此程序时，我的 chrome 浏览器会不断生成随机数，直到我停止程序。我也用 setInterval 试过这个。我想要发生的是每 5 秒生成一个随机数并将其添加到我的代码中的另一个变量中。（所以这个变量应该每 5 秒显示一个不同的数字）。我在我的客户端做这个 - React.js 并且想知道是否有另一种方法可以通过反应来做到这一点。感谢您的帮助！

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>