<p>Bekerjasama dengan projek Next.js 13 menggunakan katalog aplikasi baharu dan jotai sebagai pengurus negeri global. Sekarang saya cuba menggunakan cangkuk <code>useHydrateAtoms</code> untuk menghantar keadaan awal kepada atom saya seperti yang ditunjukkan dalam dokumentasi rasmi, tetapi ini mengakibatkan ralat penghidratan. </p> <p>Berikut ialah versi ringkas bagi kod yang sedang digunakan, yang menghantar data yang diterima daripada komponen bahagian pelayan kepada komponen bahagian klien yang memanggil <code>useHydrateAtoms</code> useAtom</ code> Baca dan tulis daripada atom ini. </p> <h5>Komponen Pelayan (Halaman)</h5> <pre class="brush:php;toolbar:false;">const getData = async () => // ... } eksport fungsi async lalai Halaman() { data const = menunggu getData(); kembalikan <ChildComponent initialState={data} />; }</pre> <h5>Komponen pelanggan</h5> <pre class="brush:php;toolbar:false;">"gunakan klien"; fungsi eksport ChildComponent({ initialState }) { useHydrateAtoms([[myAtom, initialState]]); const [data, setData] = useAtom(myAtom); kembalikan <>{data.id}</>; }</pre> <p>Ralat hilang sepenuhnya apabila saya mengimport subkomponen secara dinamik menggunakan <code>next/dynamic</code> dan menetapkan pilihan SSR kepada palsu atau mengalih keluar <code>useHydrateAtoms</code> penyelesaian mengalahkan tujuan pelaksanaan ini. </p> <p>Bagaimana cara saya menyediakan keadaan awal kepada atom saya menggunakan nilai daripada pelayan supaya atom tidak <kod>null</kod> </p>