javascript - 如何修复 `data-rbd-draggable-context-id` 不匹配。服务器 : "1" Client: "0"' with react-beautiful-dnd and next. js

Question

当我尝试使用 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()重置服务器上下文计数器，但它没有按预期工作。

Answer 1

经过一番测试，我找到了解决方案。只需调用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 : []}}

}