react-beautiful-dnd Invariant failed: Cannot find droppable entry with id

使用react-beautiful-dnd做拖拽效果，但是根据示例代码运行后，指点拖动元素就会报错：

Uncaught runtime errors:

ERROR

Invariant failed: Cannot find droppable entry with id [droppable]

从GitHub和stackoverflow上找到了相关的问题。引起报错的原因是因为 React 18 StrictMode 严格模式。

StrictMode是一种让你知道代码中是否可能犯错误的方法。不幸的是，将严格模式与react-beautiful-dnd一起使用会导致令人沮丧的 无法找到带有id的可拖动对象：[...] 的错误。

下面有两种解决方法，推荐使用第二种。

1 关闭严格模式 React.StrictMode

可以通过从应用程序中删除严格模式来简单地解决此问题。

修改方法是修改根目录下的index.js文件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
// 去掉 <React.StrictMode> ，改为
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
    </BrowserRouter>
);

这个方式实测有效，但是不推荐。

2 封装一个自定义Dropable组件

import { useEffect, useState } from "react";
import { Droppable } from "react-beautiful-dnd";

export const CustomDroppable = ({ children, ...props }) => {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));
    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);
  if (!enabled) {
    return null;
  }
  return <Droppable {...props}>{children}</Droppable>;
};

用CustomDroppable替代原来的Droppable组件，实测完美解决。