javascript - ReactJS 计时器功能来检查门户上的用户时间

Question

正如您从问题中知道的那样，我是新手。我想记下用户在某些组件上花费的时间并将它们登录到数据库中，然后从数据库中获取门户上的“时间进度”，如下图所示。一个问题是每秒都会调用useEffect，而在useEffect中，我也在调用firebase db来获取数据。所以 useEffect 也在每秒运行 db 调用，这是一个问题。

注意：下图中的时间不是作为时钟/倒计时等运行的，它将显示用户登陆该组件时从 db 花费的静态时间。

我尝试了一些解决方案：

如何计算用户在 React Native 中花费的特定屏幕上的时间

ReactJS：在按钮单击时调用计时器函数

React 中的倒数计时器

如何制作反应倒数计时器

设置倒数计时器 React JS

在这些解决方案中，计时器正在工作，但我的屏幕不断更新；这是我的代码：

const userDashBoard = (props) => {
   
    const [userinfo, setuserinfo] = useState([]);
    const [product, setProduct] = useState([]);
    const [time, settime] = useState([])

    useEffect(() => {
        let isCancelled = false;
        let time = null;
        
        db.ref("userInfo/" + props?.userId)
            .once("value")
            .then((snapshot) => {
                if (snapshot.val() != null) {
                    console.log("userInfo", snapshot.val())
                    setuserinfo( snapshot.val() )
                }
            });

        const advanceTime = () => {
            setTimeout(() => {
                //set(moment().format())

                console.log("advanceTime", moment().second())
                !isCancelled && settime(moment().second());
            }, 1000);
        }
        advanceTime();

        return () => {
            isCancelled = true;

        }
    }, [])
    
    const AddUserTime = (timer) => {
    //DB insertion here
    }

    return (
        <>
            <PageHeaderAndNav info={userinfo} />
            <Analytics />
            <UserReviews />
            <ExploreMoreSec />
        </>
    );
}

请帮帮我，我知道我错过了一些东西。请帮忙 ：（

标签： javascriptreactjstimer