React JS：使用 setInterval() 触发函数每秒执行一次

Question

我想了解这个 setInterval() 是如何工作的，以及如何使用它来触发一个函数每秒执行一次。例如，我尝试每秒生成一个新的随机数。即：函数 getNewNr 应该每秒执行一次。（稍后，这可能是一个更复杂的功能......）

这是我得到的：

import React, { useState, useEffect } from 'react'

function Random() {

    const [number, setNumber] = useState(0)

    const getNewNr = () => {
        setNumber(Math.floor(Math.random() * 100))
    }
    useEffect(() => {
        const interval = setInterval(() => getNewNr, 1000)
        return () => clearInterval(interval)
    }, [])

    return (
        <div>
            {number}
        </div>
    )
}

export default Random

但数字保持为 0，没有变化。谁能找出错误？

Answer 1

import React, { useState, useEffect } from "react";

function Random() {
  const [number, setNumber] = useState(0);

  const getNewNr = () => {
    setNumber(Math.floor(Math.random() * 100));
  };
  useEffect(() => {
    const interval = setInterval(() => getNewNr(), 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>{number}</div>;
}

export default Random;

React JS：使用 setInterval() 触发函数每秒执行一次

React JS: Trigger a function with setInterval() to execute every second

reactjs

triggers

setinterval