javascript - 如何修复 `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 : []}}
}
推荐阅读
- python - keras.preprocessing.image imagedatagenerator flow from dataframe read error
- laravel - 如何在 laravel 中编写嵌套查询
- r - 安装包。“有非零退出状态”错误。“S3 方法”错误
- c++ - 如何正确写入多维字符数组未知数量的值但固定数量的字符
- r - 如何在 R 中使用代理 api
- c - c语言中的**(&d)是什么意思?
- mysql - 如何在MYSQL中将三个连接的表多次连接到第四个表
- javascript - 如何同时选择随机对象和随机选择对象的长度
- ruby - 。包括?读取txt文件时不触发
- sql - 有没有办法将两个表合并为一个,而每列都相同,只有 FK 是两个不同的表?