我正在使用 @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 问题(水合作用)还是库特定问题。如何删除此警告?
我尝试实现拖放功能(效果很好),但每次我都会收到此警告,我想摆脱它。