Получение предупреждения с описанием aria при использовании библиотеки @dnd-kit/core

Я использую библиотеку @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

10.05.2024 09:36

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

130

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это проблема Next.js SSR. Есть два основных способа исправить это:

Удалите dnd из SSR с помощью динамического импорта, как упоминалось здесь.
Добавьте идентификатор к поставщику контекста dnd, как указано здесь.

Вы можете проверить связанную проблему в целом, чтобы получить дополнительную информацию о том, почему это происходит.

31.05.2024 15:46

Я устранил предупреждение DnD, добавив уникальный идентификатор в компонент DndContext. Этот подход сработал идеально! Убедитесь, что идентификатор уникален во всем приложении, чтобы предотвратить конфликты с другими элементами.

<DndContext
        id = "draggable-table-01"
        sensors = {sensors}
        modifiers = {[restrictToHorizontalAxis]}
        onDragEnd = {onDragEnd}
        onDragOver = {onDragOver}
        collisionDetection = {closestCenter}
    >
        <SortableContext items = {columns.map((i) => i.key)} strategy = {horizontalListSortingStrategy}>
            <DragIndexContext.Provider value = {dragIndex}>
                <Table
                    rowKey = "key"
                    columns = {columns}
                    dataSource = {dataSource}
                    components = {{
                        header: { cell: TableHeaderCell },
                        body: { cell: TableBodyCell },
                    }}
                />
            </DragIndexContext.Provider>
        </SortableContext>
        <DragOverlay>
            <th style = {{ backgroundColor: 'gray', padding: 16 }}>
                {columns[columns.findIndex((i) => i.key === dragIndex.active)]?.title as React.ReactNode}
            </th>
        </DragOverlay>
    </DndContext>

18.06.2024 15:41

Другие вопросы по теме

Есть ли способ переместить HTML между вкладками браузера в Angular?

Сохранять положение строки во время перетаскивания, когда другие строки свернуты

Как добавить функцию перетаскивания в HTML-тег ввода файла, который я настроил как изображение?

Перетаскивание в JavaScript не компенсирует перетаскивание при использовании сенсорного ввода

Python: перетаскивание исходного виджета на целевой виджет, чтобы изменить его цвет

Добавляйте и удаляйте элементы в списке перетаскивания

Перетаскиваемые элементы Vue возвращаются в исходное положение после перетаскивания

Как в SwiftUI и macOS скопировать и вставить, перетащить несколько URL-адресов локальных файлов в режим прокрутки?

Перетащите поле со знаком остановки

Syncfusion Flutter DataGrid: как включить перетаскивание столбцов и изменение их размера

Получение предупреждения с описанием aria при использовании библиотеки @dnd-kit/core

Ответы 2

Другие вопросы по теме

Похожие вопросы