React Draggable Element вызывает добавление нуля к элементам ⇐ Javascript

[Anonymous]

Попался странный вариант! У меня есть приложение React, в котором есть компонент «OHSList», который создает таблицу результатов из серверной части API Python. Я могу настроить сортировку с помощью функции перетаскивания HTML. Каждую строку можно перетаскивать, и ее можно разместить в другом месте строки строк. Есть несколько on-событий (см. код) для обработки событий перетаскивания. Я могу перетаскивать строки и сохранять порядок на бэкэнде. Но иногда, если вы перетаскиваете что-то медленно или перемещаете его в определенной области, оно начинает дублировать подэлементы других строк и добавлять под ним «ноль». Я понятия не имею, что это может быть. Пожалуйста, посмотрите видео, как это происходит, ниже. Мысли? Я программист-любитель, прошу простить за нестандартные действия
Запись экрана

Код: Выделить всё

export default function OHSList (props) {
// States and Variables
const listID = 'ohslist-' + Math.floor(Math.random() * 999999);
//const [popups, setPopups] = useState({});
var dragRow = null;
var dragPosition = 0;

// Functions
function showPopup (index) {
props.setPopups({...props.popups, [index]: true});
}
function hidePopup (index) {
props.setPopups({...props.popups, [index]: false});
}
function dragStart (event) {
dragRow = event.target;
}
function dragRun (event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
if ((event.target.tagName == "TD") && (event.target.parentNode.parentNode.tagName == "TBODY")) {
// Build Children Array
let children = Array.from(event.target.parentNode.parentNode.children);

// Position Dragged Element
if (children.indexOf(event.target.parentNode) > children.indexOf(dragRow)) {
event.target.parentNode.after(dragRow);
} else {
event.target.parentNode.before(dragRow);
}

// Set Final Position
dragPosition = children.indexOf(event.target.parentNode);
}
}
function dragEnd () {
// Acquire New Order
var order = [];
var i = 1;
$('#' + listID + '-rows').children().each(function () {
order.push({
'id': $(this).data('ohslistdataid'),
'display_order': i
});
i++;
});

// Send Back New Order
props.handleDragging(JSON.stringify({
order: order
}));
}

// Component
return (

{props.content ? props.content.length > 0 ?




{props.enableDragging && }

{Object.values(props.content[0]).map(function (header, i) {
if ((header.display !== false) && (header.metadata !== true)) {
return (

{header.title}

);
}
})}



{props.content.map(function (item, i) {
// Build OHS Filter attribute
var ohsfilter = "";
Object.values(item).map(function (subitem) {
if ((subitem.display !== false) && (subitem.metadata !== true)) {
ohsfilter = ohsfilter + " " + subitem.value;
}
});

// Build rows
return (
 {dragStart(event);}} onDragOver={(event) => {dragRun(event);}} onDragEnd={() =>  {dragEnd();}}>
{props.enableDragging &&






}





{Object.values(item).map(function (subitem, j) {
if ((subitem.display !== false) && (subitem.metadata !== true)) {
return (
 {showPopup(i);}}>

{subitem.value}


);
}
})}

);
})}


{props.enableDragging && 
Drag and drop a row to set the order of the entries (not supported on mobile)
}
{props.template && props.content.map(function (item, i) {
return (

{cloneElement(props.template, {
content: item,
index: i,
showPopup: showPopup,
hidePopup: hidePopup
})}

);
})}

: 
There are no items to display
 : 
There are no items to display
}

);
}

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-elements