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

Question

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

Answer 1

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

Answer 2

尝试删除 React 的严格模式。

Answer 3

您可以使用此自定义组件作为替代品，而不是从“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 4

尝试删除index.js/index.ts中的React.StrictMode 我已经尝试过了，它解决了我的问题

Answer 5

对我来说，改变渲染根/应用程序的方式：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

对此：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

似乎成功了。不确定较新版本的 React 是否存在问题。