使用钩子反应组件与本地存储同步状态倒计时

Question

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

const Timer = () =>{
    const [timer, setTimer] = useState(120);
    
    const countTimer = () =>{
        if(timer <= 0){
             localStorage.clear("timer");
             console.log("timer less then 0")
             return;
        } else {
            console.log("greater then 0")
            setTimer(timer -1) ;
            localStorage.setItem("timer",timer);
            setTimeout(countTimer(),1000);
        }
    }
    
    
    useEffect(()=>{
        if(localStorage.getItem("timer")){
            setTimer(localStorage.getItem("timer"));
        } else {
            setTimer(120);
        }
        if(timer){
            setTimeout(countTimer(),1000);
        }
    },[timer])
    return (
        <div align="center">
            Timer :{timer}  
        </div>
    )
}

export default Timer

我的目标是在 react 中实现倒计时计时器，该计时器将与本地存储和跨浏览器选项卡同步，页面显示计数器， 想要同步 state 的 timer 和 local storage 的 timer，把它们放在 useEffect 的 timer change 更新 state 的 timer 和更新 setTimeout 里面的 local storage，拜托了！帮帮我，谢谢

Answer 1

您的代码存在一些问题。

第一个问题是setTimeout 接受一个回调函数作为它的第一个参数。它将在作为第二个参数提供的时间之后执行。但不是将函数 countTimer 作为回调传递，而是传递它的执行结果。

if(timer){
    setTimeout(countTimer(),1000); // here you're passing as the callback 
                                   // the result of execution of countTimer
                                   // namely `undefined` value
}

另一个问题是您调用了两次setTimeout。在每次timer 变量更改时将执行的useEffect 钩子内部和每次执行的countTimer 函数内部。

还有一个问题。每次当timer 变量发生变化时，您都会从localStorage 读取timer 键并再次设置setTimer。当state 被useEffect 更改时，它会导致React 变为schedule another render。而且您的代码将触发几乎无限循环。这将不断地重新渲染组件，直到时间用完。

还有另一个问题。如果您的组件在超时仍然运行时被卸载。待处理的函数最终将被执行。它会将卸载前的timer 值写入localStorage。如果你再次挂载这个组件，执行时挂起的超时可能会覆盖新创建的值。

这是清除任何挂起的超时或其他对卸载的影响的好习惯。因此，如果 setTimeout 仍在运行，您最好清理它。为此，您必须返回 cleanup 函数作为来自 useEffect 钩子的返回值。

总结一下：

• 将回调函数传递给setTimeout，而不是它的执行结果
• 不要创建多个挂起的超时
• 不要在useEffect 内触发无限重新渲染
• 组件卸载时清理挂起的超时

总而言之，它应该是这样的：

import * as React from 'react'

const Timer = () => {
    const initialTimer = localStorage.getItem("timer") ?? 120;
    const timeoutId = React.useRef(null);
    const [timer, setTimer] = React.useState(initialTimer);

    const countTimer = React.useCallback(() => {
        if (timer <= 0) {
            localStorage.clear("timer");
        } else {
            setTimer(timer - 1);
            localStorage.setItem("timer", timer);
        }
    }, [timer]);

    React.useEffect(() => {
        timeoutId.current = window.setTimeout(countTimer, 1000);
        // cleanup function
        return () => window.clearTimeout(timeoutId.current);
    }, [timer, countTimer]);

    return <div align="center">Timer :{timer}</div>;
}

export default Timer

codesandbox link