React中localStorage值重渲染后反复变回0的问题排查

开发者阿泽

2026-8-4

问题排查与修复方案

1. 核心问题定位

你遇到的问题本质是组件初始化时没有从localStorage读取已保存的最优值，而是直接用0作为初始状态，导致每次刷新或重渲染都会覆盖掉localStorage里的有效数据。

2. 修复初始化逻辑

修改状态初始化代码，在组件挂载时优先读取localStorage中的值，不存在时才用0作为默认值：

// 读取本地存储的最优掷骰次数，无数据则返回0
const getInitialBestRolls = () => {
  const saved = localStorage.getItem('bestRolls');
  return saved ? parseInt(saved) : 0;
};

// 读取本地存储的最优耗时，无数据则返回0
const getInitialBestTime = () => {
  const saved = localStorage.getItem('bestTime');
  return saved ? parseInt(saved) : 0;
};

// 用上述函数初始化状态
const [bestRollCount, setBestRollCount] = useState(getInitialBestRolls());
const [bestTime, setBestTime] = useState(getInitialBestTime());

3. 验证游戏结束的存储逻辑

确保游戏结束时的对比更新逻辑正确，避免把初始0值当成有效最优值：

const handleGameEnd = () => {
  const currentRolls = rollCount;
  const currentTime = elapsedTime;

  // 更新最优掷骰次数
  if (bestRollCount === 0 || currentRolls < bestRollCount) {
    setBestRollCount(currentRolls);
    localStorage.setItem('bestRolls', currentRolls.toString());
  }

  // 更新最优耗时
  if (bestTime === 0 || currentTime < bestTime) {
    setBestTime(currentTime);
    localStorage.setItem('bestTime', currentTime.toString());
  }
};