如何使用 react-beautiful-dnd 摆脱奇怪的 id 错误？

问题描述

现在我有一个看起来像这样的页面：

我显示了一些 ClosedExerciseComp 组件，基本上是带有各自 ID 的小卡片。当我按下 Add exercise 按钮时，会出现一张新的练习卡。

使用 react-beautiful-dnd 卡片完全可以拖放。
但是有时当我放下一个物品时，我会收到这个错误：

当我放下一个物品时它似乎是随机发生的，但如果我在卡片之间的小间隙中进行垃圾邮件拖放，我可以获得更可靠的错误触发。我演示here。

我的代码看起来像这样（我知道它有点长）（美学上的简化）：

import React,{ useState } from "react";
import { DragDropContext,Droppable,Draggable } from "react-beautiful-dnd";
import ExerciseComp from "../components/ExerciseComp/ExerciseComp";

const EditorMainPage = () => {
    const [exercises,setExercises] = useState([]);

    const addExercise = () => {
        const exercise = {
            id: "exercise-" + Date.Now(),...,};
        setExercises((exercises) => [...exercises,exercise]);
    };

    const handleDragEnd = (result) => {
        if (!result.destination) return;
        if (result.destination.index === result.source.index) return;
        const items = [...exercises];
        const [reorderedItem] = items.splice(result.source.index,1);
        items.splice(result.destination.index,reorderedItem);
        setExercises(items);
    };

    const Exercises = () => {
        return (
            <DragDropContext onDragEnd={handleDragEnd}>
                <Droppable droppableId="exercises-dnd">
                    {(provided) => (
                        <div
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                        >
                            {exercises.map((exercise,index) => (
                                <Draggable
                                    key={exercise.id}
                                    draggableId={exercise.id}
                                    index={index}
                                >
                                    {(provided) => (
                                        <div
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                        >
                                            <ExerciseComp
                                                id={exercise.id}
                                            />
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        );
    };

    return (
        <div>
            <Exercises />
            <button onClick={() => addExercise()}>Add exercise</button>
        </div>
    );
};

export default EditorMainPage;

我希望你能帮助我理解为什么突然反应决定现有的可拖动对象不存在？？？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）