React嵌入swagger-editor二次渲染出现openapi-2.0 schema已存在报错如何解决

该报错的核心原因是swagger-editor依赖的Ajv校验库会将openapi-2.0、openapi-3.0这类基础规范schema注册到webworker绑定的校验实例中，第二次渲染时旧组件实例未被正常销毁，旧worker残留的已注册schema和新实例的注册逻辑冲突。可通过以下方案解决：

方案1：组件卸载时主动销毁实例与worker #

在React组件的卸载生命周期中手动触发swagger-editor的销毁逻辑，终止关联的webworker，彻底清理残留资源。
示例代码：

import SwaggerEditor from '@swagger-api/swagger-editor';
import { useRef, useEffect } from 'react';

function SwaggerEditorWrapper() {
  const editorRef = useRef(null);
  const workerRef = useRef(null);

  useEffect(() => {
    // 初始化editor时捕获worker实例
    const editor = new SwaggerEditor({
      dom_node: editorRef.current,
      // 其余自定义配置项
    });
    // 部分版本可通过editor.specActions.getWorker()获取worker引用
    workerRef.current = editor.worker;

    // 卸载清理逻辑
    return () => {
      // 调用editor内置销毁方法
      editor.destroy?.();
      // 手动终止worker进程
      workerRef.current?.terminate();
    };
  }, []);

  return <div ref={editorRef}></div>;
}

方案2：强制组件完整重挂载 #

给swagger-editor外层容器添加动态key属性，触发React的重渲染逻辑，自动销毁旧组件实例和关联的所有资源。可将拉取的swagger文件版本号、请求时间戳等唯一值作为key：

function SwaggerEditorWrapper({ specVersion }) {
  // specVersion每次拉取新规范时更新，确保key唯一
  return <SwaggerEditor key={specVersion} spec={fetchedSpec} />;
}

方案3：跳过重复schema注册校验 #

如果swagger-editor版本支持配置Ajv初始化参数，可传入skipExistingSchemas: true，避免重复注册已存在的schema时抛出错误。
如果可直接修改worker内的Ajv初始化逻辑，调整配置如下：

// worker内Ajv初始化位置添加配置
const ajv = new Ajv({
  // 其余原有配置
  skipExistingSchemas: true
});

方案4：手动清理已注册schema缓存 #

每次初始化新的editor实例前，手动清理worker中Ajv实例已注册的重复schema：

// 若可直接访问Ajv实例，调用removeSchema方法清理冲突schema
ajv.removeSchema('openapi-2.0');
ajv.removeSchema('openapi-3.0');

注意：优先使用方案1和方案2，属于无侵入的适配方案，不会影响swagger-editor本身的校验逻辑完整性。

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