NextJS 13中Zustand状态刷新后丢失问题排查求助

核心问题排查与修复方案 #

1. 修正skipHydration与手动Rehydrate的逻辑冲突 #

开启skipHydration后，Zustand不会自动从localStorage加载初始数据，必须确保手动调用rehydrate的时机优先于任何状态修改操作，同时检查store配置是否存在细节错误：

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

interface WishlistState {
  productIds: string[]
  addToWishlist: (id: string) => void
}

export const useWishlistStore = create<WishlistState>()(
  persist(
    (set) => ({
      productIds: [],
      addToWishlist: (id) => set((state) => ({ productIds: [...state.productIds, id] })),
    }),
    {
      name: 'wishlist-storage',
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({ productIds: state.productIds }),
      skipHydration: true,
    }
  )
)

• 重点确认partialize中的属性名与store内的状态名完全一致（比如是否把productIds误写为productsIDS），属性名不匹配会导致持久化数据为空。

2. 确保Hydrations组件的客户端身份与执行时机 #

NextJS 13 App Router的根布局默认是服务器组件，Hydrations组件必须标记为客户端组件才能触发useEffect执行rehydrate：

// app/Hydrations.tsx
'use client'

import { useEffect } from 'react'
import { useWishlistStore } from '@/stores/Wishlist'

export default function Hydrations() {
  const rehydrate = useWishlistStore((state) => state.rehydrate)

  useEffect(() => {
    rehydrate()
  }, [rehydrate])

  return null
}

• 根布局中仅引入该组件，不要在服务器组件中直接调用useWishlistStore，否则服务器端生成的初始空数组会在客户端hydration时覆盖localStorage数据。

3. 排查状态修改逻辑的执行时机 #

检查WishlistTable组件中是否在rehydrate完成前就修改了productIds状态：

• 确保useQuery获取商品数据后更新wishlistProducts的操作，仅依赖productIds的持久化后状态，不要在组件初始化时强制重置productIds。

4. 验证持久化流程 #

1. 打开浏览器开发者工具的Application标签，确认添加商品后wishlist-storage键值正确存储了productIds数组。
2. 刷新页面时，在Hydrations组件的useEffect中添加console.log('rehydrate called')，确认方法被执行。
3. 检查控制台是否有Zustand相关的序列化错误或存储键名冲突提示。

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