React 美丽的 DND - 我得到“无法找到带有 id 的可拖动对象：1”

Question

在下面的代码中，UI 呈现两个“列”组件，每个列包含两个称为“任务”的可拖动元素。当用户在列之间拖动“任务”时，代码会起作用 - _直到一个点_。当用户不断地拖动任务组件时，它们最终会停止拖动，用户会收到一条错误消息：

无法找到 ID 为：X 的可拖动对象

我不知道为什么会这样，也不知道如何解决。

注意： 我假设库的工作方式是当您拖动元素时，您需要在 onDragEnd 函数中重新排序和更新您的状态。

这是我的代码：

应用程序.js

 import React,{useState} from 'react';
import {DragDropContext} from 'react-beautiful-dnd';
import helper from './helper_functions'

import Column from './Components/Column';

function App() {

  let initialState =   [
    {
      groupName:"Today",
      tasks:[
          {id:"1", title:"Test-1"},
          {id:"2", title:"Test-2"}
        ]
    },
    {
      groupName:"Tomorrow",
      tasks:[
          {id:"3", title:"Test-3"},
          {id:"4", title:"Test-4"}
        ]
    },
  ]

  const [taskList, setTasks] = useState(initialState)

  function onDragEnd(val){

     let result = helper.reorder(val.source,val.destination,taskList);
     setTasks(result)
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
       <Column droppableId="Today" list= {taskList[0].tasks} type="TASK"/>
       <Column droppableId ="Tomorrow" list = {taskList[1].tasks} type="TASK"/>
       <div> context hello world </div>
    </DragDropContext>
  );
}

export default App;

源代码/helper_functions

 export default {
    reorder:function(source,destination,taskDataArr){

     let taskData = [...taskDataArr]

 //     //_____________________________________________________________Source data
    let sourceGroupIndex = taskData.findIndex((val, index) => {                // iterate and find "Today" (or other) index in list data
        return val.groupName === source.droppableId
    });

    let draggedTask = taskData[sourceGroupIndex].tasks.find((val, index) => {  // Get specific task object based on index
        return source.index === index
    }); // dragged object

    let sourceListCopyWithElementRemoved = taskData[sourceGroupIndex].tasks.filter((val, index) => {
        return index !== source.index // removes dragged element from array
    });

    // //__________________________________________________________________Destination data

    let destinationGroupIndex = taskData.findIndex((val, index) => {  // iterate and find "Tomorrow" (or other) index in list data
        return val.groupName === destination.droppableId
    });

    taskData[destinationGroupIndex].tasks.splice(destination.index, 0, draggedTask); // insert dragged item to new place
    taskData[sourceGroupIndex].tasks = sourceListCopyWithElementRemoved

    return taskData

  }

}

源代码/组件/列

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, droppableId, list, type} = props;

   let style = {
    backgroundColor:"orange",
    height:"300px",
    width:"400px",
    margin:"100px"

   }

   console.log(list)

    return (

       <Droppable droppableId = {droppableId} type={type}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
          <h2>{droppableId}</h2>

            {list.map((val,index)=>{
               return <Task id={val.id} key={index} index={index} title={val.title}/>
            })}

           {provided.placeholder}
          </div>
        )
       }
       </Droppable>
    )
}

export default Column

源代码/组件/任务

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';

function Task(props){
    const { classes, id, index,title } = props;
    let style = {
    backgroundColor:"red",

   }

    return (
       <Draggable draggableId ={id} index={index} type="TASK">

         {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              <h4 style={style}>{title}</h4>
            </div>
        )}

       </Draggable>
    )
}

export default Task

原文由 William 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的代码存在一些问题：

1. 错误 Unable to find draggable with id: X

在 Column 组件中，您使用 index 作为任务的键。我认为这是 导致此错误的原因。

使用任务 id 作为 key ，在 Column 中，使这个错误消失。

1. reorder 有一些问题：
   • 它在同一列中删除任务
   • 当任务被放到列外时会引发错误

我从你的代码中获得了一些乐趣，并 尝试了另一种重新排序的方法。如果您添加更多列，这种重新排序的方式可能会派上用场——仍有改进的空间。

希望能帮助到你！

原文由 bamse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你在 React 18 上遇到这个错误

Unable to find draggable with id:

尝试删除 StrictMode

原文由 iamziike 发布，翻译遵循 CC BY-SA 4.0 许可协议