Next.js、Zustand 和从本地存储加载初始状态

Question

在我的 Zustand 存储中，我尝试从本地存储中保存的数据加载初始状态（我没有选择中间件，因为 Next 存在一些我不想处理的问题）：

const getInitialProject = (): Project => {
    const project = loadCurrentProjectFromLs()

    return (
        project ?? {
            projectName: '',
            cards: [],
        }
    )
}

const useProjectStore = create<ProjectStore>((set, get) => ({
    ...getInitialProject(),
...

然而，页面的第一次渲染是在服务器上完成的，而不是在客户端上完成的（在 React 和 Next.js 构造函数中，我收到“引用错误：本地存储未定义”），这意味着当时无法访问本地存储。

这意味着我的代码无法正常工作，因为状态只能在第一次渲染后更新，但导致 Zustand 初始化的钩子在第一次渲染期间被触发。

有没有比使用useEffect当 localStorage 变得可访问时更新存储的钩子更好的方法来解决这个问题？我希望逻辑成为商店的一部分，而不是客户端，但我想不出比带有计时器的循环更好的东西......

Answer 1

最后，我使用了一个带有 useEffect 的顶部布局文件，当 LS 可用时，该文件会触发商店中的加载功能。这样，该功能至少不是页面的一部分，而是更广泛的基础设施（布局文件）。

    const [hasInitializedStore, setHasInitializedStore] = useState(false)

    useEffect(() => {
        if (!hasInitializedStore && typeof window !== 'undefined') {
            loadCurrentProject()
            setHasInitializedStore(true)
        }
    }, [hasInitializedStore, loadCurrentProject])