Next.js中react-timer-hook刷新后无法从localStorage恢复计时状态

核心问题 #

1. 初始值异步更新导致过期时间计算错误：组件初始化时currentTime基于elapsed的初始值3600计算，而从localStorage读取elapsed的操作在useEffect中（组件挂载后执行），此时expiryTimestamp已经固定，后续elapsed更新也不会重新触发useTimer的参数更新。
2. 手动维护elapsed的方式错误：用setInterval直接修改elapsed--属于直接变更state（违反React不可变原则），且闭包会捕获旧的elapsed值，导致存储到localStorage的数值不准确。
3. useTimer参数未响应elapsed变化：即使elapsed更新，useTimer的expiryTimestamp未重新计算，计时器仍使用初始的过期时间。

修复方案 #

1. 优先从localStorage初始化state #

组件挂载时直接从localStorage读取elapsed作为初始值，避免异步更新导致的初始计算错误：

const savedElapsed = localStorage.getItem('elapsed');
const [elapsed, setElapsed] = useState(savedElapsed ? JSON.parse(savedElapsed) : 3600);

2. 利用useTimer的onChange回调同步剩余时间到localStorage #

react-timer-hook提供了onChange回调，每次计时器变化时会返回剩余时间（毫秒），我们可以直接用这个回调来更新localStorage，无需手动写setInterval：

const handleTimerChange = (time) => {
  // 将剩余毫秒转换为秒，取整
  const remainingSeconds = Math.floor(time / 1000);
  setElapsed(remainingSeconds);
  localStorage.setItem('elapsed', JSON.stringify(remainingSeconds));
};

3. 用useMemo动态计算过期时间 #

确保elapsed变化时，expiryTimestamp能重新计算，让useTimer使用最新的过期时间：

const expiryTimestamp = useMemo(() => {
  const current = new Date();
  current.setSeconds(current.getSeconds() + elapsed);
  return current;
}, [elapsed]);

4. 完整组件代码示例 #

import { useState, useMemo } from 'react';
import { useTimer } from 'react-timer-hook';
import Typography from '@mui/material/Typography';

function Timer({ seconds, minutes, hours }) {
  return (
    <Typography variant="h5" fontWeight={'bold'} component={'div'}>
      <span>{String(hours).padStart(2, '0')}</span>:
      <span>{String(minutes).padStart(2, '0')}</span>:
      <span>{String(seconds).padStart(2, '0')}</span>
    </Typography>
  );
}

export default function PersistentTimer() {
  // 从localStorage初始化剩余秒数
  const savedElapsed = localStorage.getItem('elapsed');
  const [elapsed, setElapsed] = useState(savedElapsed ? JSON.parse(savedElapsed) : 3600);

  // 动态计算过期时间，依赖elapsed变化
  const expiryTimestamp = useMemo(() => {
    const currentTime = new Date();
    currentTime.setSeconds(currentTime.getSeconds() + elapsed);
    return currentTime;
  }, [elapsed]);

  // 计时器变化时同步到localStorage和state
  const handleTimerChange = (remainingTime) => {
    const remainingSeconds = Math.floor(remainingTime / 1000);
    setElapsed(remainingSeconds);
    localStorage.setItem('elapsed', JSON.stringify(remainingSeconds));
  };

  // 处理计时器到期逻辑
  const handleForm = () => {
    localStorage.removeItem('elapsed'); // 到期后清除存储
    // 你的到期处理逻辑
    console.log('计时器已到期');
  };

  const { seconds, minutes, hours } = useTimer({
    expiryTimestamp,
    onExpire: handleForm,
    onChange: handleTimerChange, // 绑定变化回调
  });

  return <Timer seconds={seconds} minutes={minutes} hours={hours} />;
}

额外注意事项 #

• 当计时器到期时，记得清除localStorage中的elapsed，避免下次进入页面时读取到过期的数值。
• 若用户长时间不操作页面，浏览器可能会暂停计时器，此时存储的elapsed可能与实际剩余时间有偏差，若需要更高精度的持久化，可以考虑存储到期时间戳而非剩余秒数，这样即使页面刷新，直接用存储的到期时间戳初始化useTimer即可，无需计算剩余秒数（这种方式更可靠）：

// 存储到期时间戳的方式
const savedExpiry = localStorage.getItem('expiryTimestamp');
const expiryTimestamp = useMemo(() => {
  if (savedExpiry) {
    return new Date(JSON.parse(savedExpiry));
  }
  const current = new Date();
  current.setSeconds(current.getSeconds() + 3600);
  return current;
}, []);

const handleTimerChange = (remainingTime) => {
  const expiry = new Date(Date.now() + remainingTime);
  localStorage.setItem('expiryTimestamp', JSON.stringify(expiry.getTime()));
};

const handleForm = () => {
  localStorage.removeItem('expiryTimestamp');
};

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