动态挂载卸载Modal时出现Cannot update an unmounted root错误求助

你遇到的Uncaught Error: Cannot update an unmounted root.错误，核心原因是全局的root实例被unmount()后就彻底失效了，无法再复用它执行render操作：

• 第一次点击关闭modal时，root.unmount()会销毁这个root实例及其关联的DOM节点；
• 再次点击打开modal时，调用root.render(Modal)会尝试更新一个已经被卸载的root实例，因此触发报错。

方案一：保留root实例，渲染空内容替代卸载 #

这种方式更轻量，不需要销毁root，只是在关闭modal时渲染空内容：

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(() => {
        // 打开时渲染Modal，关闭时渲染null
        root.render(up ? Modal : null);
    }, [up]);

    return [up, setUp] as const;
}

方案二：每次挂载时重新创建root实例 #

如果需要彻底清理modal的DOM和root实例，可以在打开时创建新root，关闭时销毁：

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

export default function useModal() {
    const [up, setUp] = useState(false);
    const rootRef = useRef<Root | null>(null);

    useEffect(() => {
        const modalContainer = document.getElementById('modals')!;
        
        if (up) {
            // 打开时创建新的root实例并渲染Modal
            rootRef.current = createRoot(modalContainer);
            rootRef.current.render(Modal);
        } else {
            // 关闭时卸载root并清空引用
            if (rootRef.current) {
                rootRef.current.unmount();
                rootRef.current = null;
            }
        }

        // 组件卸载时的清理逻辑
        return () => {
            if (rootRef.current) {
                rootRef.current.unmount();
                rootRef.current = null;
            }
        };
    }, [up]);

    return [up, setUp] as const;
}

内容的提问来源于stack exchange，提问作者mod7ex