Next.js 13 - Jotai 的 useHydrateAtoms 挂钩导致 UI 不匹配
P粉548512637
P粉548512637 2023-08-29 15:28:26
[React讨论组]
<p>使用新的应用程序目录和 jotai 作为全局状态管理器来处理 Next.js 13 项目。现在我尝试使用 <code>useHydrateAtoms</code> 挂钩将初始状态传递给我的原子,如官方文档中所示,但这会导致水合错误。</p> <p>以下是当前使用的代码的简化版本,它将从服务器端组件接收到的数据传递到调用 <code>useHydrateAtoms</code> 的客户端组件,并使用 <code>useAtom</code> 从该原子读取和写入。 </p> <h5>服务器组件(页面)</h5> <pre class="brush:php;toolbar:false;">const getData = async () =&gt; { // ... } export default async function Page() { const data = await getData(); return &lt;ChildComponent initialState={data} /&gt;; }</pre> <h5>客户端组件</h5> <pre class="brush:php;toolbar:false;">&quot;use client&quot;; export function ChildComponent({ initialState }) { useHydrateAtoms([[myAtom, initialState]]); const [data, setData] = useAtom(myAtom); return &lt;&gt;{data.id}&lt;/&gt;; }</pre> <p>当我使用 <code>next/dynamic</code> 动态导入子组件并将 SSR 选项设置为 false 或删除 <code>useHydrateAtoms</code> 挂钩时,错误完全消失,但这两种解决方案都违背了此实现的目的。</ p> <p>如何使用来自服务器的值向我的原子提供初始状态,以便原子在第一次客户端渲染时不是 <code>null</code> ?</p>
P粉548512637
P粉548512637

全部回复(1)
P粉495955986

我发现 useHydrateAtoms 钩子本身并不是问题,它是一个客户端组件,它访问通过 next/dynamic 动态导入的 UI 不同部分的状态 ssr 选项设置为 false。这导致组件显示的值在第一次渲染时发生变化,从而导致 UI 不匹配。

如何修复错误

只需将调用 useHydrateAtoms 的组件移动到组件树的顶部,这将确保所有子组件都将使用正确的值进行渲染。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号