React中使用useLocalStorage时如何让localStorage计时器值逐次减1

localStorage中存储的计时器值无法逐次减1，核心是三个问题：

• 空依赖useEffect的闭包问题：如果所用的useLocalStorage Hook没有对返回的更新函数做引用稳定处理，挂载时创建的定时器中拿到的永远是初始版本的更新方法，无法将最新的计时值同步写入localStorage
• 类型转换隐患：localStorage默认只能存储字符串，如果你没有做显式类型转换，读取到的字符串值参与数值计算、判断时，容易出现隐式转换bug，导致计时逻辑中断
• 倒计时到0的分支逻辑有隐患：直接在三元表达式中写setDisabled() || 5 * 60，一旦setDisabled()返回非假值，会把该返回值作为新的计时值存入，直接打乱计时逻辑

1. 给定时器Effect补全正确依赖，不要强制使用空数组忽略依赖
2. 所有从localStorage派生的计时值做显式数值转换，避免字符串类型干扰计算
3. 拆分倒计时到0后的分支逻辑，避免函数返回值污染计时状态

修复后的完整代码：

const [timeLeft, setTimeLeft] = useLocalStorage('timer', 5 * 60)

const getPadTime = (time) => time.toString().padStart(2, '0')
// 显式转数值，避免字符串类型导致计算错误
const currentTime = Number(timeLeft)
const minutes = getPadTime(Math.floor(currentTime / 60))
const seconds = getPadTime(currentTime - minutes * 60)

useEffect(() => {
    const interval = setInterval(() => {
        setTimeLeft((prev) => {
            const prevNum = Number(prev)
            if (prevNum >= 1) {
                return prevNum - 1
            } else {
                setDisabled()
                // 倒计时结束直接返回重置值，避免受setDisabled返回值影响
                return 5 * 60
            }
        })
    }, 1000)
    return () => clearInterval(interval) 
// 若useLocalStorage返回的setTimeLeft是稳定引用（同原生useState返回的更新函数），不会触发effect重复重建
}, [setTimeLeft])

如果按上述修改后还是无法同步写入localStorage，可以在更新逻辑中加一层兜底，手动同步存储值：

setTimeLeft((prev) => {
    const prevNum = Number(prev)
    const nextVal = prevNum >= 1 ? prevNum - 1 : (setDisabled(), 5 * 60)
    // 兜底手动写入localStorage
    localStorage.setItem('timer', String(nextVal))
    return nextVal
})

内容的提问来源于stack exchange，提问作者Eugene Kliuchnikov