Question

我用祖传来维持我的人数,但复一页上的数字是连接的,我可以做些什么来加以纠正。

“entergraph

我不敢确定造成这一问题的原因,这似乎是一个服务器和客户水解问题,其原因不正确。

这是我的 app。

 use client 
import Button from  @mui/material/Button 
import { useCountStore } from  @/app/store/useCountStore 
import useStore from  ./store/useStore 

const Home = () => {
  const countStore = useStore(useCountStore, (state) => state)
  return (
    <>
      <div className= text-[red] text-[24px] >{countStore?.num}</div>
      <Button onClick={countStore?.increaseNum} variant= contained >increase number</Button>
      <Button onClick={countStore?.decreaseNum} variant= contained >decrease number</Button>
    </>
  )
}
export default Home

这是我的仓库/仓库。

import { create } from  zustand 
import { persist } from  zustand/middleware 

interface countType {
    num: number,
    increaseNum: () => void,
    decreaseNum: () => void
}
export const useCountStore = create(persist<countType>((set, get) => ({
    num: 0,
    increaseNum: () => set({ num: get().num + 1 }),
    decreaseNum: () => set({ num: get().num - 1 }),
}), { name:  count_storage_tag  }))

这是我的仓库/仓库。

 use client 
import { useState, useEffect } from  react 

const useStore = <T, F>(
    store: (callback: (state: T) => unknown) => unknown,
    callback: (state: T) => F,
) => {
    const result = store(callback) as F
    const [data, setData] = useState<F>()

    useEffect(() => {
        setData(result)
    }, [result])

    return data
}

export default useStore

Answer 1

我怀疑,如果你转向<代码>countStore?num ? 0,它将显示0,而不是连接(实际上更好,但不是点)。

答案可能是有益的(about,但根本问题相同)。

In a nutshell:
This happens because the Client Component is still initally rendered (once) on the server. While the name can be a bit confusing, the idea is to provide the user with the best "empty HTML shell" possible before rehydrating in the user s browser.
That s great, but the server has no access to zustand state (it s client side only), and it ends up with a nullish value in countStore. The value appears once the client-side hydratation step is complete.

You could persist zustand state in cookies to share it with the server (which I do not recommend, except theme variables maybe). Most likely, you should keep the state client side, and have the server default to a skeleton version of your component.
As long as the skeleton and the actual content are the same height, the UX should be great.

例如:

<div className= text-[red] text-[24px] >{countStore?.num ??  - }</div>

或

{countStore
    ? <div className= text-[red] text-[24px] >{countStore.num}</div>
    : <Skeleton />}

友情链接