Question

在使用Next.js框架时，我在React中遇到以下错误。我当前使用的是react-avatar-editor软件包，我认为正在发生以下错误：

Warning: Prop `width` did not match. Server: "250" Client: "500"
in canvas (created by i)
in i (at upload.js:22)
in div (at upload.js:21)
in ImageCrop (at test.js:5)
in Test (at _app.js:65)
in App
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

这是道具的组成部分，在一个名为avatar-editor.js的文件中：

<AvatarEditor
    ref={setEditorRef}
    image="image.jpg"
    width={250}
    height={250}
    border={0}
    color={[255, 255, 255, 0.6]} 
    scale={scale}
/>

Answer 1

万一其他人遇到类似问题，事实证明它与Next.js服务器端呈现（SSR）有关。我设法通过使用Next.js动态导入来解决它：

const ImageCrop = dynamic(() => import('../components/avatar-editor'), {
  ssr: false
})

您可以在Next.js中了解有关动态导入的更多信息：https://nextjs.org/docs/advanced-features/dynamic-import

反应警告：道具x不匹配。服务器：x客户端：x

1 个答案: