为什么我在动态安装和卸载组件时收到错误<Error: Cannot update an unmounted root.>

Question

我想使用钩子动态挂载和卸载模式

const root = createRoot(document.getElementById('modals')!);

const Modal = <h1>Lorem ipsum dolor sit amet consectetur.</h1>;

export default function useModal() {
    const [up, setUp] = useState(false);

    useEffect(() => {
        if (up) root.render(Modal);
        else queueJob(() => root.unmount());
    }, [up]);

    return [up, setUp] as const;
}

在我的应用程序中

const App = () => {
    const [up, setUp] = useModal();

    return (<button onClick={() => setUp(v => !v)}>show modal</button>);
};

当我单击此按钮时，我收到错误

Uncaught Error: Cannot update an unmounted root.

我做错了什么吗？任何帮助，提前致谢

Answer 1

我也遇到过这个问题，这就是原因：

一旦调用 root.unmount，您就无法在同一根上再次调用 root.render。尝试在未安装的根上调用 root.render 将引发“无法更新未安装的根”错误。但是，在卸载该节点的先前根之后，您可以为同一 DOM 节点创建新的根。

链接到react文档

因此您可能希望每次执行卸载后都创建一个新的根目录