Next.js 13 - Cangkuk useHydrateAtoms Jotai menyebabkan ketidakpadanan UI
<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>
