如何解决"data-rbd-draggable-context-id"不匹配.服务器:"1";客户:"0"与react-beautiful-dnd和next.js [英] How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js
问题描述
当我尝试将 react-beautiful-dnd
与 next.js
一起使用时(或通常在服务器端渲染中使用),在对项目重新排序并刷新页面后,我得到了此错误:
When I try to use react-beautiful-dnd
with next.js
(or in general with server side rendering), after reorder items and refresh the page I get this error:
react-dom.development.js:88 Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"
这(取决于第一个):
react-beautiful-dnd.esm.js:39 react-beautiful-dndA setup problem was encountered.> Invariant failed: Draggable[id: 1]: Unable to find drag handle
我尝试使用 resetServerContext()
重置服务器上下文计数器,但是它不能按预期工作.
I try to use resetServerContext()
to reset the server context counter, but it doesn't work as expected.
推荐答案
经过一些测试,我找到了解决方案.只需调用 resetServerContext()
服务器端:例如,在 next.js
页面中,我简单地在 getServerSideProps
After some test i found a solution. Just call resetServerContext()
server side:
As an example, in a next.js
page i simple call it in getServerSideProps
import { GetServerSideProps } from "next";
import React from "react";
import { resetServerContext } from "react-beautiful-dnd";
import { DndWrapper } from "../../components/DndWrapper";
export default function App({ data }) {
return <DragDropContext onDragEnd={onDragEnd}>...</DragDropContext>
}
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
resetServerContext() // <-- CALL RESET SERVER CONTEXT, SERVER SIDE
return {props: { data : []}}
}
这篇关于如何解决"data-rbd-draggable-context-id"不匹配.服务器:"1";客户:"0"与react-beautiful-dnd和next.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!