反应美丽的 DND - 我得到 "Unable to find draggable with id: 1"
React beautiful DND - I get "Unable to find draggable with id: 1"
在下面的代码中，UI 呈现两个 "Column" 组件，每列包含两个名为 "Tasks" 的可拖动元素。当用户在列之间拖动 "Task" 时，代码有效 - 到一个点 。当用户不断拖动任务组件时，它们最终会停止拖动，用户会收到一条错误消息：
Unable to find draggable with id: X
我不知道为什么会这样，也不知道如何解决。
注意： 我假设库的工作方式是当您拖动元素时需要在 onDragEnd 函数中重新排序和更新状态。
这是我的代码：
app.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/Components/Column
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/Components/Task
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
您的代码存在一些问题：
- 错误
Unable to find draggable with id: X
在 Column 组件中，您使用 index 作为任务的键。我认为这是 what causes this error.
在 Column 中将任务 id 用作 key，可以消除此错误。
reorder 有一些问题：
- 它会在同一列中删除任务
- 当任务被放到列外时引发错误
我从你的代码中获得了一些乐趣 tried another way to reorder。如果您添加更多列，这种重新排序的方式可能会派上用场 - 仍有改进的空间。
希望对您有所帮助！
不适用于这种情况，但是
对于每一个 - 检查 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 尝试通过 provided.draggableProps 查找节点。缺少这个道具会出错：Unable to find draggable with id: X
我 运行 遇到了同样的问题，但是以下步骤对我有帮助
第 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} >
Post就到这里了，因为这是顶link，对于同样的错误Google。
可能是这样，您没有使用 provided.dragHandleProps
渲染元素
<div>
{someCondition && (
<div>
<DragIndicatorIcon {...provided.dragHandleProps}/>
</div>
)}
</div>
在这种情况下，将 {...provided.dragHandleProps} 移出条件
<div {...provided.dragHandleProps}>
{someCondition && (
<div>
<DragIndicatorIcon {...provided.dragHandleProps}/>
</div>
)}
</div>
找到这个解决方案here
我有一个类似的问题，我正在通过多个 draggable 进行映射并且错过了关键道具，
将密钥添加到 Draggable 为我解决了这个问题
{tasks.map((t, index) => (
<Draggable
draggableId={t._id}
index={index}
key={t._id} >
....
</Draggable>
}
尝试将整数值转换为字符串。它会像解决我的问题一样解决问题
{tasks.map((t, index) => (
<Draggable
draggableId={t._id.toString()}
index={index}
key={t._id} >
....
</Draggable>
}
react-beautiful-dnd 上有 YouTube 课程。他张贴了他的
代码沙盒中的课程进度 enter link description here
你可以打开它并确定。但我有关于“反应”：“^ 18.1.0”确实
不工作并给出错误
Unable to find draggable with id:X
并且在旧版本的 React 上，一切都可以在没有
errors.Try 例如另一个版本的 react"^17.0.2"+ 它起作用了
对我来说
还记得，安装react-beautiful-dnd库的时候，有没有依赖冲突？也许您还没有建立所有连接，因此它无法正常工作。无论如何，作为测试，我建议从课程中下载代码并检查我的项目是否有效。如果能运行，说明代码有错误，如果不能运行，则react-beautiful-dvd没有正常运行
如果您在 React 18 上遇到此错误
Unable to find draggable with id:
尝试移除 StrictMode
在下面的代码中，UI 呈现两个 "Column" 组件，每列包含两个名为 "Tasks" 的可拖动元素。当用户在列之间拖动 "Task" 时，代码有效 - 到一个点 。当用户不断拖动任务组件时，它们最终会停止拖动，用户会收到一条错误消息：
Unable to find draggable with id: X
我不知道为什么会这样，也不知道如何解决。
注意： 我假设库的工作方式是当您拖动元素时需要在 onDragEnd 函数中重新排序和更新状态。
这是我的代码：
app.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/Components/Column
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/Components/Task
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
您的代码存在一些问题：
- 错误
Unable to find draggable with id: X
在 Column 组件中，您使用 index 作为任务的键。我认为这是 what causes this error.
在 Column 中将任务 id 用作 key，可以消除此错误。
reorder有一些问题：- 它会在同一列中删除任务
- 当任务被放到列外时引发错误
我从你的代码中获得了一些乐趣 tried another way to reorder。如果您添加更多列，这种重新排序的方式可能会派上用场 - 仍有改进的空间。
希望对您有所帮助！
不适用于这种情况，但是
对于每一个 - 检查 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 尝试通过 provided.draggableProps 查找节点。缺少这个道具会出错：Unable to find draggable with id: X
我 运行 遇到了同样的问题，但是以下步骤对我有帮助
第 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} >
Post就到这里了，因为这是顶link，对于同样的错误Google。
可能是这样，您没有使用 provided.dragHandleProps
<div>
{someCondition && (
<div>
<DragIndicatorIcon {...provided.dragHandleProps}/>
</div>
)}
</div>
在这种情况下，将 {...provided.dragHandleProps} 移出条件
<div {...provided.dragHandleProps}>
{someCondition && (
<div>
<DragIndicatorIcon {...provided.dragHandleProps}/>
</div>
)}
</div>
找到这个解决方案here
我有一个类似的问题，我正在通过多个 draggable 进行映射并且错过了关键道具， 将密钥添加到 Draggable 为我解决了这个问题
{tasks.map((t, index) => (
<Draggable
draggableId={t._id}
index={index}
key={t._id} >
....
</Draggable>
}
尝试将整数值转换为字符串。它会像解决我的问题一样解决问题
{tasks.map((t, index) => (
<Draggable
draggableId={t._id.toString()}
index={index}
key={t._id} >
....
</Draggable>
}
react-beautiful-dnd 上有 YouTube 课程。他张贴了他的 代码沙盒中的课程进度 enter link description here 你可以打开它并确定。但我有关于“反应”：“^ 18.1.0”确实 不工作并给出错误
Unable to find draggable with id:X
并且在旧版本的 React 上，一切都可以在没有 errors.Try 例如另一个版本的 react"^17.0.2"+ 它起作用了 对我来说
还记得，安装react-beautiful-dnd库的时候，有没有依赖冲突？也许您还没有建立所有连接，因此它无法正常工作。无论如何，作为测试，我建议从课程中下载代码并检查我的项目是否有效。如果能运行，说明代码有错误，如果不能运行，则react-beautiful-dvd没有正常运行
如果您在 React 18 上遇到此错误
Unable to find draggable with id:
尝试移除 StrictMode