React应用中刷新浏览器时如何将localStorage的count值递增1

问题分析 #

你的现有代码存在两个核心问题：

• 初始值未执行递增逻辑，仅读取了localStorage的原始值
• useEffect内的setCount(count)无意义，且存储的还是未递增的初始值

下面是两种可行的实现方案，适配不同场景需求：

方案一：初始化时直接完成递增（推荐） #

在初始值计算阶段直接完成递增，组件挂载后同步最新值到localStorage：

const initialCount = () => {
  // 仅在浏览器环境且满足参数条件时计算值
  if (typeof window !== 'undefined' && hasRedirectQueryParam) {
    // 读取存储值（默认0）后直接加1
    const storedCount = Number(window.localStorage.getItem('count')) || 0;
    return storedCount + 1;
  }
  return null;
};

const [count, setCount] = useState(initialCount);

useEffect(() => {
  // 仅当count有效时，同步到localStorage
  if (count !== null && typeof window !== 'undefined') {
    window.localStorage.setItem('count', String(count));
  }
}, [count]);

代码说明 #

• 初始值计算：组件首次渲染时直接完成递增，刷新后count立即更新为目标值
• 依赖同步：将count作为useEffect依赖，确保count变化时自动同步存储，避免遗漏
• 边界处理：保留typeof window !== 'undefined'判断，避免服务端渲染（SSR）报错

方案二：挂载时执行递增逻辑 #

如果需要分离“读取旧值”和“递增”的逻辑，可以在组件挂载阶段完成递增操作：

const initialCount = () => {
  if (typeof window !== 'undefined' && hasRedirectQueryParam) {
    // 先读取localStorage的原始值
    return Number(window.localStorage.getItem('count')) || 0;
  }
  return null;
};

const [count, setCount] = useState(initialCount);

useEffect(() => {
  // 仅在满足条件时执行递增+存储
  if (hasRedirectQueryParam && count !== null && typeof window !== 'undefined') {
    const newCount = count + 1;
    setCount(newCount);
    window.localStorage.setItem('count', String(newCount));
  }
}, []); // 空依赖确保仅在组件挂载（刷新）时执行一次

代码说明 #

• 初始值仅读取原始存储值，递增逻辑放在挂载阶段执行
• 空依赖数组保证该逻辑只在刷新/首次加载时运行一次

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