React не может обновить DOM после того, как элемент был перемещен с использованием javaScript из другой библиотеки

Я использую функцию UIKit (упорядочить) для перетаскивания вещей на экран, и она отлично работала, пока у меня не появилась эта ошибка:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

UIKit перемещает элемент списка li из одной группы ul в другую ul. Поскольку я использую UIKit для обработки перетаскивания, он отлично работает, пока я не изменю состояние и не отреагирую на отображение экрана, на котором я получаю указанную выше ошибку.

Можно ли отказаться от виртуального dom и попросить отреагировать на воссоздание или вручную обновить виртуальный DOM, чтобы отразить изменения в пользовательском интерфейсе? Или любые другие идеи приветствуются.

После этого документа кажется, что можно интегрировать с другими библиотеками, которые изменяют DOM (https://reactjs.org/docs/integrating-with-other-libraries.html), однако это старый документ, и я нашел статью в блоге, чтобы воссоздать forceUpdate с помощью этого настраиваемого хука:

import React, { useState } from 'react';
const useForceUpdate = () => useState()[1];
const App = () => {
  const forceUpdate = useForceUpdate();
  console.log('rendering');
  return <button onClick={forceUpdate}>Click To Render</button>;
};

Поэтому я вызываю forceUpdate перед повторным рендерингом, но все равно получаю ту же ошибку.


reactjs javascript virtual-dom getuikit
person Icaro    schedule 17.08.2020    source источник
comment
К сожалению, если вы выполняете рендеринг с помощью React, вам нужно обрабатывать в React, выполнение прямого DOM после этого просто нарушит виртуальный DOM. 2, не отображать с помощью React или, в качестве альтернативы, обернуть все события / компоненты UIKit в некоторые компоненты React. Есть несколько готовых компонентов UIKit React, но беглый взгляд на них, похоже, давно не обновлялся. Лучшим вариантом будет использование компонентов, которые были разработаны специально для React.   -  person Keith    schedule 17.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы решить эту проблему, пришлось потрудиться, я оставлю вопрос открытым на тот случай, если кто-то предложит менее взломанное решение, чем мое решение.

Мне пришлось повторно добавить удаленный элемент в дом, поэтому реакция будет счастлива и удалит, для дополнительного добавленного элемента мне не нужно было ничего делать, реакция не испугалась дополнительным элементом, но для одного удаления перед отправкой функцию обновления постоянных данных и повторного рендеринга, я сделал это:

  function removed(a) {
    a.srcElement.appendChild(a.detail[1]);
    dispatch({
      type: "deleteTodo",
      payload: { id: +a.detail[1].id },
    });
  }

Я даже не могу заметить, что элемент был повторно добавлен, чтобы реагировать на удаление

person Icaro    schedule 18.08.2020