15

在下面的代码中，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;

src/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

  }


}

src/组件/列

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

src/组件/任务

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
4

6 回答 6

54

您的代码存在一些问题：

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

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

将任务id用作key, inColumn可以消除此错误。

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

我对你的代码很感兴趣，并尝试了另一种重新排序的方法。如果您添加更多列，这种重新排序方式可能会派上用场 - 仍有改进的空间。

希望能帮助到你！

于 2020-02-06T10:35:39.890 回答
12

不是针对这种情况，而是针对每个案例 -provided.draggableProps不检查provided.dropableProps

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

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

RBD 尝试通过提供的.draggableProps 查找节点。缺少此道具会出现错误：Unable to find draggable with id: X

于 2020-06-09T11:45:03.227 回答
2

我有一个类似的问题，我正在映射多个可拖动对象并且错过了关键道具，将密钥添加到 Draggable 为我解决了这个问题

{tasks.map((t, index) => (
  <Draggable
    draggableId={t._id}
    index={index}
    key={t._id} >
     ....
  </Draggable>
}
于 2021-09-30T13:05:59.433 回答
1

我遇到了同样的问题，但是以下步骤可以帮助我

第1步：

draggableId should be string, not an integer

根据https://github.com/atlassian/react-beautiful-dnd/issues/1512

第2步：

如果您来自 EggHead 教程，这可能会错过。尝试添加顶部答案中提到的关键属性

<Draggable key={item.id} draggableId={item.id.toString()} index={index} >
于 2021-08-11T01:04:16.693 回答
0

将其发布在这里，因为这是 Google 针对相同错误的顶部链接。

可能的情况是，您没有使用provided.dragHandleProps

<div>
      {someCondition && (
           <div>
               <DragIndicatorIcon {...provided.dragHandleProps}/>
           </div>
      )}
</div>

在这种情况下，移出{...provided.dragHandleProps}条件

<div {...provided.dragHandleProps}>
      {someCondition && (
           <div>
               <DragIndicatorIcon {...provided.dragHandleProps}/>
           </div>
      )}
</div>

在这里找到了这个解决方案

于 2021-09-29T13:17:02.360 回答
0

尝试将整数值转换为字符串。它会解决我的问题

{tasks.map((t, index) => (
  <Draggable
    draggableId={t._id.toString()}
    index={index}
    key={t._id} >
     ....
  </Draggable>
}
于 2021-12-29T14:37:28.710 回答