찾다

 >  Q&A  >  본문

Next.js 13 - Jotai의 useHydrateAtoms 후크로 인해 UI 불일치가 발생함

<p>새로운 애플리케이션 디렉토리와 jotai를 전역 상태 관리자로 사용하여 Next.js 13 프로젝트로 작업합니다. 이제 공식 문서에 표시된 대로 <code>useHydrateAtoms</code> 후크를 사용하여 초기 상태를 원자에 전달하려고 시도하지만 이로 인해 수화 오류가 발생합니다. </p> <p>다음은 현재 사용되는 코드의 단순화된 버전입니다. 이 버전은 서버측 구성요소에서 수신된 데이터를 <code>useHydrateAtoms</code>를 호출하고 <code> useAtom</ code> 이 Atom에서 읽고 씁니다. </p> <h5>서버 구성요소(페이지)</h5> <pre class="brush:php;toolbar:false;">const getData = async () => // ... } 기본 비동기 함수 내보내기 Page() { const 데이터 = getData()를 기다립니다; return <ChildComponentinitialState={data} /> }</pre> <h5>클라이언트 구성요소</h5> <pre class="brush:php;toolbar:false;">"클라이언트 사용" 내보내기 함수 ChildComponent({initialState }) { useHydrateAtoms([[myAtom,initialState]]); const [data, setData] = useAtom(myAtom); return <>{data.id}</> }</pre> <p><code>next/dynamic</code>를 사용하여 하위 구성요소를 동적으로 가져오고 SSR 옵션을 false로 설정하거나 <code>useHydrateAtoms</code> 후크를 제거하면 오류가 완전히 사라집니다. 두 솔루션 모두 이 구현의 목적을 상실합니다. </p> <p>첫 번째 클라이언트 렌더링에서 원자가 <code>null</code>되지 않도록 서버의 값을 사용하여 원자에 초기 상태를 제공하려면 어떻게 해야 합니까? </p>
P粉548512637P粉548512637451일 전647

모든 응답(1)나는 대답할 것이다

  • P粉495955986

    P粉4959559862023-08-30 13:38:02

    나는 발견했다 useHydrateAtoms 钩子本身并不是问题,它是一个客户端组件,它访问通过 next/dynamic 动态导入的 UI 不同部分的状态 ssr 选项设置为 false. 이로 인해 구성 요소가 표시하는 값이 첫 번째 렌더링 시 변경되어 UI 불일치가 발생합니다.

    오류 수정 방법

    useHydrateAtoms를 호출하는 구성 요소를 구성 요소 트리의 맨 위로 이동하기만 하면 모든 하위 구성 요소가 올바른 값으로 렌더링됩니다.

    회신하다
    0
  • 취소회신하다