如何解决如何解决“ data-rbd-draggable-context-id”不匹配服务器:“ 1”客户端:“ 0”,带有react-beautiful-dnd和next.js
当我尝试将react-beautiful-dnd
与next.js
一起使用(或通常与服务器端渲染一起使用)时,在对项目进行重新排序并刷新页面后,出现此错误:
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()
重设服务器上下文计数器,但是它不能按预期工作。
解决方法
经过一些测试,我找到了解决方案。只需致电resetServerContext()
服务器端:
例如,在一个next.js
页面中,我简单地在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 : []}}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。