如何修复 `data-rbd-draggable-context-id` 不匹配。服务器：“1” 客户端：“0”' 具有 react-beautiful-dnd 和 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 : []}}

}

Answer 2

另一个解决方案：

const [isBrowser, setIsBrowser] = useState(false);

useEffect(() => {
  setIsBrowser(process.browser);
}, [])

function Home() {
  return(
   <>
    {isBrowser ? <DragDropContext> { /* all rbd code */ } </DragDropContext> : null}
   </>
  )
}

Answer 3

我在 nextjs 页面的末尾使用了这个 b-dnd。

export async function getServerSideProps(context) {
  resetServerContext()   
  return {props: { data : []}}
}

并在 next.config.js 中设置。

module.exports = {
  reactStrictMode: true,
};

这行得通，但老实说，我并不完全理解其中的含义。

Answer 4

检查您是否在使用 css-in-js 库。由于 nextjs 页面中的以下代码，我运行遇到了类似的问题：

<Draggable
 key={task.id}
 draggableId={task.id}
 index={index}
>
      {(provided, snapshot) => {
        return (
          <div
           className={styles.card}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
           // style={{
           //   ...provided.draggableProps.styles,
           // }}
           // The abpve code is commented due to React Hydration Error
           // Link: https://nextjs.org/docs/messages/react-hydration-error
          >
             .
             .
             .                 
          </div>
      );
 }}
</Draggable>

这里是 link 错误详情：https://nextjs.org/docs/messages/react-hydration-error

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

javascript

reactjs

next.js

server-side-rendering

react-beautiful-dnd