使用来自另一个库的 javaScript 移动元素后，React 无法更新 DOM

Question

我正在使用 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 以反映 UI 上的更改？或者任何其他想法都欢迎。

似乎遵循此文档，可以与其他改变 DOM (https://reactjs.org/docs/integrating-with-other-libraries.html) 的库集成，但是它是一个旧文档，我发现了一篇博客文章来重新创建使用此自定义挂钩强制更新：

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，但仍然遇到相同的错误

Answer 1

不得不四处寻找解决这个问题的方法，我会把这个问题留长一点，以防有人想出比我的解决方案更少的破解解决方案[=11] =]

我不得不 re-add 将删除的元素添加到 dom 所以反应会很高兴并删除，对于额外添加的元素我不需要做任何事情，反应并没有吓坏一个额外的元素，但是对于在发送函数之前删除的元素以更新持久数据并且 re-render 我这样做了：

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

我什至没注意到该元素已被 re-add编辑为能够删除

使用来自另一个库的 javaScript 移动元素后，React 无法更新 DOM

React failing to update DOM after a element was moved using javaScript from another library

javascript

reactjs

getuikit

virtual-dom