Next.js 13 – Jotais useHydrateAtoms-Hook führt zu einer Nichtübereinstimmung der Benutzeroberfläche
<p>Arbeiten mit Next.js 13-Projekten unter Verwendung des neuen Anwendungskatalogs und Jotai als globalem Statusmanager. Jetzt versuche ich, den Hook <code>useHydrateAtoms</code> zu verwenden, um den Anfangszustand an meine Atome zu übergeben, wie in der offiziellen Dokumentation gezeigt, aber dies führt zu einem Hydratationsfehler. </p>
<p>Das Folgende ist eine vereinfachte Version des derzeit verwendeten Codes, der die von der serverseitigen Komponente empfangenen Daten an die clientseitige Komponente weitergibt, die <code>useHydrateAtoms</code> aufruft und <code> useAtom</ code> Von diesem Atom lesen und schreiben. </p>
<h5>Serverkomponente (Seite)</h5>
<pre class="brush:php;toolbar:false;">const getData = async () =>
// ...
}
Exportieren Sie die standardmäßige asynchrone Funktion Page() {
const data = Warten auf getData();
return <ChildComponent initialState={data} />;
}</pre>
<h5>Client-Komponente</h5>
<pre class="brush:php;toolbar:false;">"Client verwenden";
Exportfunktion ChildComponent({ initialState }) {
useHydrateAtoms([[myAtom, initialState]]);
const [data, setData] = useAtom(myAtom);
return <>{data.id}</>;
}</pre>
<p>Der Fehler verschwindet vollständig, wenn ich die Unterkomponente mit <code>next/dynamic</code> dynamisch importiere und die SSR-Option auf false setze oder den <code>useHydrateAtoms</code>-Hook entferne, aber beides Lösungen verfehlen den Zweck dieser Implementierung. </p>
<p>Wie stelle ich meinem Atom mithilfe eines Werts vom Server einen Anfangszustand zur Verfügung, sodass das Atom beim ersten Client-Rendering nicht <code>null</code> ist? </p>
