Реагируй на красивый DND - я получаю "Невозможно найти перетаскиваемый с идентификатором: 1" - PullRequest
Новая
       37

Реагируй на красивый DND - я получаю "Невозможно найти перетаскиваемый с идентификатором: 1"

1 голос
/ 02 февраля 2020

В приведенном ниже коде пользовательский интерфейс отображает два компонента «Столбец», а каждый столбец содержит два перетаскиваемых элемента, называемых «Задачи». Когда пользователь перетаскивает «Задачу» между столбцами, код работает - до точки . Когда пользователь непрерывно перетаскивает компоненты задачи, в конце концов он прекращает перетаскивание, и пользователь получает сообщение об ошибке:

Невозможно найти перетаскиваемый элемент с идентификатором: X

I не знаю, почему это происходит, и как это исправить.

Примечание: Я предполагаю, что библиотека работает так, когда вы перетаскиваете элементы, вам нужно изменить порядок и обновить свое состояние в 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

1 Ответ

5 голосов
/ 06 февраля 2020

Есть несколько проблем с вашим кодом:

  1. Ошибка Unable to find draggable with id: X

В компоненте Column вы использовали index в качестве ключа для задания. Я думаю, что это , что вызывает эту ошибку .

Использование задачи id в качестве key в Column устраняет эту ошибку go.

reorder имеет некоторые проблемы:
  • удаляет задачу при удалении в тот же столбец
  • выдает ошибку, когда задача отбрасывается за пределы столбцов

Я немного повеселился с вашим кодом и попробовал другой способ изменить порядок . Этот способ изменения порядка может пригодиться, если вы когда-нибудь добавите больше столбцов - еще есть возможности для улучшений.

Надеюсь, это поможет!

...