如何修复 `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"

还有这个(取决于第一个):

And this (that depends on the first one):

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屋！