react-beautiful-dnd - 不变失败：找不到带有 id 的可删除条目

Question

我正在遵循一个react-beautiful-dnd教程，该教程使用react组件类而不是钩子。当我遇到这个错误时，我正在使用现代反应语法编写一个等效的程序。不变失败：找不到 id [column-1] 的可删除条目。我试图动态更新存储原始列索引的变量，以防止用户将任务拖动到较早的列。当我尝试在 onDragStart 函数内部使用 useState 挂钩时发生错误。我创建了一个显示问题的codeSandbox，非常感谢您的帮助。

Answer 1

只需删除 index.jsx/index.tsx 文件上的 React.strictMode 标签

Answer 2

您可以使用此自定义组件作为替代，而不是从“react-beautiful-dnd”导入“Dropable”表单：

import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  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>;
};

TypeScript 版本的功劳归功于GitHub 上的GiovanniACamacho和Meligy。

Answer 3

尝试删除 React 的严格模式。