[英]NextJs / Framer Motion: When using useViewportScroll I got this warning: Warning: useLayoutEffect does nothing on the server,
I am using NextJs with Framer Motion.我将 NextJs 与 Framer Motion 一起使用。 Everything is working properly but I got this warning:一切正常,但我收到此警告:
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
Seems like this will be get fixed in the upcoming framer-motion version.似乎这将在即将推出的 framer-motion 版本中得到修复。
From the GitHub conversation来自 GitHub 的对话
The React 18 upgrade in #1438 introduced a new useIsMounted hook, that that didn't use the useIsomorphicLayoutEffect. #1438 中的 React 18 升级引入了一个新的 useIsMounted 挂钩,它没有使用 useIsomorphicLayoutEffect。 This resulted in a warning rendered serverside.这导致服务器端出现警告。 Fix by replacing useLayoutEffect with useIsomprohicLayoutEffect通过将 useLayoutEffect 替换为 useIsomprohicLayoutEffect 进行修复
https://github.com/framer/motion/pull/1452 https://github.com/framer/motion/pull/1452
For a temporary fix, you can cancel rendering the the component if it is not client render, by adding such as对于临时修复,如果组件不是客户端渲染,您可以取消渲染组件,方法是添加诸如
const [isLoaded, setLoaded] = useState(false);
useEffect(() => {
setLoaded(true);
}, []);
if (!isLoaded) {
return null;
}
return (
...your component
);
Next does SSR which is why its throwing this warning as useLayoutEffect doesn't run on server.接下来是SSR ,这就是为什么它抛出这个警告,因为 useLayoutEffect 不在服务器上运行。
Official docs of useLayoutEffect : useLayoutEffect 的官方文档:
The signature is identical to useEffect, but it fires synchronously after all DOM mutations.签名与 useEffect 相同,但它在所有 DOM 突变后同步触发。 Use this to read layout from the DOM and synchronously re-render.使用它从 DOM 中读取布局并同步重新渲染。 Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.