usePreventScroll 在 Nextjs 中导致 useLayoutEffect 警告

Question

我正在学习 Next.js 并且正在尝试将 @react-aria/overlays 包集成到我的项目中。我有一个布局组件，我只是在其中调用 usePreventScroll 方法，如下所示：

   usePreventScroll({
        isDisabled: true
    });

我的_app.js.

中使用了这个布局组件

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

import 'styles/vendor.scss';
import 'styles/globals.scss';

import Layout from 'components/layout';

import { SSRProvider } from '@react-aria/ssr';

const App = ({ Component, pageProps }) => {
  return (
      <SSRProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </SSRProvider>
  )
}

导出默认应用；

当转到我的浏览器并加载页面时，出现以下错误：

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. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at Layout (/home/bas/projects/test-website/build/server/pages/_app.js:718:3)
    at div
    at $c5f9596976ab8bd94c5879001549a3e$var$OverlayContainerDOM (/home/bas/projects/test-website/node_modules/@react-aria/overlays/dist/main.js:864:7)
    at ModalProvider (/home/bas/projects/test-website/node_modules/@react-aria/overlays/dist/main.js:810:5)
    at OverlayProvider
    at SSRProvider (/home/bas/projects/test-website/node_modules/@react-aria/ssr/dist/main.js:33:13)
    at UIContextProvider (/home/bas/projects/test-website/build/server/pages/_app.js:1144:74)
    at ManagedUIContext (/home/bas/projects/test-website/build/server/pages/_app.js:1105:3)
    at App (/home/bas/projects/test-website/build/server/pages/_app.js:5171:3)
    at AppContainer (/home/bas/projects/test-website/node_modules/next/dist/next-server/server/render.js:23:748)

这里有什么问题，我该如何解决？

我尝试将 Layout 组件包装在 <SSRProvider>.

包中

Answer 1

接下来的 js 是在服务器上计算您的第一个页面。所以它不理解浏览器滚动或本地存储或其他浏览器api。如果存在 window 对象或在服务器中执行运行，则可以在代码块中添加检查，然后执行 usePreventDefault.

    import {useIsSSR} from '@react-aria/ssr';

    function Layout() {
       let isSSR = useIsSSR();
 
       useEffect(() => {
         !isSSR && usePreventScroll({ ... }) 
       }, [isSSR])
    }

Answer 2

您可以动态加载组件并禁用 SSR：

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

代码示例取自 NextJS docs。如果那不是你的事，只要 processs.browser 为真，你就可以调用挂钩或渲染组件。

usePreventScroll 在 Nextjs 中导致 useLayoutEffect 警告

usePreventScroll causes useLayoutEffect warning in Nextjs

javascript

reactjs

next.js

react-aria