如何解决“ 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 : []}}

}