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

Question

我正在使用 UIKit(排列)功能在屏幕上拖放内容，在我开始出现此错误之前它一直运行良好:

NotFoundError:无法在“节点”上执行“removeChild”:要删除的节点不是该节点的子节点

UIKit 正在将列表元素 li 从一组 ul 移动到另一组 ul。因为我正在使用 UIKit 来处理拖放，所以在我更改状态之前效果很好，并且需要在出现上述错误的地方渲染屏幕。

是否可以丢弃虚拟 DOM 并要求重新创建或手动更新虚拟 DOM 以反射(reflect) UI 上的更改？或者欢迎任何其他想法。

按照这个文档，似乎可以与其他改变 DOM 的库(https://reactjs.org/docs/integrating-with-other-libraries.html)集成，但它是一个旧文档，我发现一篇博客文章用这个自定义钩子(Hook)重新创建 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 但仍然得到相同的错误

Answer 1

不得不四处寻找解决这个问题的方法，我会把这个问题悬而未决，以防有人想出比我的解决方案更少的 hack 解决方案

我不得不将删除的元素重新添加到 dom 中，这样 react 会很高兴并删除，对于额外添加的元素我不需要做任何事情， react 并没有因为一个额外的元素而崩溃，但是对于一个在分派(dispatch)函数之前删除以更新持久数据并重新呈现我这样做了:

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

我什至没有注意到该元素被重新添加以便能够删除 React