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

當我嘗試將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 2

另一種解決方案：

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

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

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

Answer 3

我使用 b-dnd 在 nextjs 頁面的末尾使用了它。

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>

這是錯誤詳細信息的鏈接： https://nextjs.org/docs/messages/react-hydration-error

Answer 5

接受的答案對我不起作用，但我在這里找到了一個可行的解決方案：

import dynamic from 'next/dynamic';

const DragDropContext = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.DragDropContext;
    }),
  {ssr: false},
);
const Droppable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Droppable;
    }),
  {ssr: false},
);
const Draggable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Draggable;
    }),
  {ssr: false},
);

此解決方案禁用在 SSR 模式下加載 react-beautiful-dnd 模塊。