使用@dnd-kit/core库时通过警告获取aria-描述

问题描述 投票:0回答:1

我正在使用 @dnd-kit/core 库来实现拖放功能,但每次安装组件时我都会收到此特定警告。

Warning: Prop `aria-describedby` did not match. Server: "DndDescribedBy-1" Client: "DndDescribedBy-2"     at div     at th     at _c10 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:97:11)     at DraggableTableHeader (webpack-internal:///(app-pages-browser)/./src/components/data-table/data-table.tsx:116:11)     at SortableContext (webpack-internal:///(app-pages-browser)/./node_modules/@dnd-kit/sortable/dist/sortable.esm.js:312:5)     at tr     at _c8 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:83:11)     at thead     at _c2 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:41:11)     at table     at div     at _c (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:20:11)     at div     at div     at DndContext (webpack-internal:///(app-pages-browser)/./node_modules/@dnd-kit/core/dist/core.esm.js:2864:5)     at DataTable (webpack-internal:///(app-pages-browser)/./src/components/data-table/data-table.tsx:204:11)     at div     at div     at div     at PaymentsPage (Server)     at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)     at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)     at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)     at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)     at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:346:11)     at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)     at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)     at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)     at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)     at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:367:11)     at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11)     at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)     at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)     at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)     at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)     at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:346:11)     at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)     at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)     at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)     at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)     at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:367:11)     at body     at html     at RootLayout (Server)     at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)     at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)     at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)     at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)     at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)     at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)     at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)     at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)     at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)     at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)     at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)     at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)     at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11) window.console.error @ app-index.js:33 console.error @ hydration-error-info.js:63 printWarning @ react-dom.development.js:94 error @ react-dom.development.js:68 warnForPropDifference @ react-dom.development.js:32715 diffHydratedGenericElement @ react-dom.development.js:34933 diffHydratedProperties @ react-dom.development.js:35113 hydrateInstance @ react-dom.development.js:36127 prepareToHydrateHostInstance @ react-dom.development.js:7246 completeWork @ react-dom.development.js:19769 completeUnitOfWork @ react-dom.development.js:25963 performUnitOfWork @ react-dom.development.js:25759 workLoopConcurrent @ react-dom.development.js:25734 renderRootConcurrent @ react-dom.development.js:25690 performConcurrentWorkOnRoot @ react-dom.development.js:24504 workLoop @ scheduler.development.js:256 flushWork @ scheduler.development.js:225 performWorkUntilDeadline @ scheduler.development.js:534 Show 18 more frames Show less

我不知道这是 Next.js 问题(水合作用)还是库特定问题。如何删除此警告?

我尝试实现拖放功能(效果很好),但每次我都会收到此警告,我想摆脱它。

next.js drag-and-drop dnd-kit
1个回答
0
投票

这是一个 Next.js SSR 问题。基本上有两种方法可以解决这个问题:

  1. 使用动态导入从 SSR 中删除 dnd,如此处所述。
  2. 将 ID 添加到 dnd 上下文提供程序,如此处所述。

您可以查看一般链接的问题,以获取有关发生这种情况的原因的更多信息。

© www.soinside.com 2019 - 2024. All rights reserved.