当我尝试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 : []}}
}