引擎初始化后，切换路由，下次即无法打开设计器

[LiuLingyang]

Describe the bug (required) / 详细描述 bug（必填）

在编辑页面使用 init 方法初始化引擎打开设计器后，切换路由；再次进入编辑页面无法打开设计器；

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

• main 内函数为registerPlugins 和 init 方法 切换路由再回来后，再次 openDocument 无效果，设计器未加载成功； 插件全部注销，重新注册，无效果，设计器未加载成功； 重走 init 方法，无效果，设计器未加载成功；

Expected behavior (required) / 预期行为（必填，非常重要）

希望提供引擎彻底销毁的方法，重走引擎 init 能生效； 或者 提供在不销毁引擎的情况下，重新打开设计器的方法；

Environments (please complete the following information) (required): / 请提供如下信息（必填）

• 引擎版本 1.0.3
• ext 版本 1.0.3

[github-actions[bot]]

Hello @LiuLingyang. We totally like your proposal/feedback, PR wanted。

你好 @LiuLingyang，我们完全同意你的提议/反馈，欢迎 PR。

[LeoYuan]

可以试着隐藏一下？切走再切回来，用户回不到原来的编辑态体验也挺奇怪

[LiuLingyang]

可以试着隐藏一下？切走再切回来，用户回不到原来的编辑态体验也挺奇怪

讲一下我们的应用场景： 一个页面管理列表页面，一个编辑页面，编辑页面就是加载设计器； 操作步骤如下： 1.页面管理里进入页面 A 编辑，获取 A 页面数据，保存成功后跳转回页面管理； 2.进入页面 B 编辑，获取 B 页面数据，此时遇到上诉问题，无法再次打开设计器了；

你说的隐藏是指？

[leoner]

折腾了好久， 没有找到太好的方式， 目前通过各种处理， 其他部分都能重新渲染， 现在就差这个编辑器面板了。 定位到大概是这里的问题， 就是 这个 iframe 里面的节点没有重新初始化。

正确的， 应该有这个节点。

[leoner]

现在就差这个了。

[leoner]

感觉设计器的这个 iframe 可能有缓存逻辑，

https://github.com/alibaba/lowcode-demo/blob/main/src/scenarios/custom-initialization/index.tsx#L36

这个 demo 在切换不同场景的时候， 会重新刷新页面，所以整个全局缓存都会被清理， 所以没有问题。但是如果页面没有刷新的时候， 只是切换的话， 这个 设计器面板貌似就出不来了。

[LeoYuan]

设计器 SPA 的场景确实没怎么测试过，要不你试着打开新页面，或者给个完整的代码仓库和重现步骤，我有空看看好不好搞定~

[leoner]

@LeoYuan 好的， 我看看用 umi 搭建一个最小的例子。

[leoner]

@LeoYuan 提交了， 你看看哈。 来回切换下， 就重现了

https://github.com/leoner/umi-lowcode

[leoner]

registerPlugins().then(() => {
  setHasPluginInited(true);
}).catch(err => {
   location.reload();
});

先用一个折中的方法解决， 就是如果插件注册错误， 重新 reload 页面了。

[vs0533]

我也遇到这个问题了 请问你解决了吗 能否告知解决方案？

[leoner]

最近看了金蝉的视频， 发现了一个比较好的解决方案， 之前也是对这个理解不够。就是这个 Editor 确实只需要初始化一次， 只是切换的时候， 只要切换 schema 就行了， 具体的切换方式如下

设计阶段的 schema 的切换

schema 的获取切换， 根据自己的业务场景， 自己处理就好。

import {
  project,
} from '@alilc/lowcode-engine';

// 就是需要先从 project 注销掉 document,  然后在加载新的 schema
project.removeDocument(project.currentDocument);
project.openDocument(schema);

预览

预览就是一个标准的 React 组件了， 具体可以看官方提供的例子， 只要能切换 schema 就能动态更换了。

<ReactRenderer
      className="lowcode-plugin-sample-preview-content"
      schema={data.schema}
      appHelper={{
        request,
        message,
      }}
      components={data.components}
    />

[lyjfight]

我在使用时也碰到该现象，在React的SPA下切换路由也是会这样，registerPlugins和plugins.init也是加了一个标志位在切换路由中只会初始化一次 并且进入编辑器的路由会执行下面schema的切换方法

project.removeDocument(project.currentDocument);
project.openDocument(schema)

我在别的路由进入编辑器路由是可以的但是会出现以下报错

当我在编辑器路由刷新页面后切到别的路由再切回来就看不到schema内容了

[cyh-88]

project.removeDocument(project.currentDocument);

这个 project.currentDocument 指的是什么呐？

[Baoyx007]

最近看了金蝉的视频， 发现了一个比较好的解决方案， 之前也是对这个理解不够。就是这个 Editor 确实只需要初始化一次， 只是切换的时候， 只要切换 schema 就行了， 具体的切换方式如下

设计阶段的 schema 的切换

schema 的获取切换， 根据自己的业务场景， 自己处理就好。

import {
  project,
} from '@alilc/lowcode-engine';

// 就是需要先从 project 注销掉 document,  然后在加载新的 schema
project.removeDocument(project.currentDocument);
project.openDocument(schema);

预览

预览就是一个标准的 React 组件了， 具体可以看官方提供的例子， 只要能切换 schema 就能动态更换了。

<ReactRenderer
      className="lowcode-plugin-sample-preview-content"
      schema={data.schema}
      appHelper={{
        request,
        message,
      }}
      components={data.components}
    />

好像还是不行,有完整的例子吗

[xiyuanwang]

最近看了金蝉的视频， 发现了一个比较好的解决方案， 之前也是对这个理解不够。就是这个 Editor 确实只需要初始化一次， 只是切换的时候， 只要切换 schema 就行了， 具体的切换方式如下

设计阶段的 schema 的切换

schema 的获取切换， 根据自己的业务场景， 自己处理就好。

import {
  project,
} from '@alilc/lowcode-engine';

// 就是需要先从 project 注销掉 document,  然后在加载新的 schema
project.removeDocument(project.currentDocument);
project.openDocument(schema);

预览

预览就是一个标准的 React 组件了， 具体可以看官方提供的例子， 只要能切换 schema 就能动态更换了。

<ReactRenderer
      className="lowcode-plugin-sample-preview-content"
      schema={data.schema}
      appHelper={{
        request,
        message,
      }}
      components={data.components}
    />

好像还是不行,有完整的例子吗

我也试了，不行哎。

[lucy091]

最近看了金蝉的视频， 发现了一个比较好的解决方案， 之前也是对这个理解不够。就是这个 Editor 确实只需要初始化一次， 只是切换的时候， 只要切换 schema 就行了， 具体的切换方式如下

设计阶段的 schema 的切换

schema 的获取切换， 根据自己的业务场景， 自己处理就好。

import {
  project,
} from '@alilc/lowcode-engine';

// 就是需要先从 project 注销掉 document,  然后在加载新的 schema
project.removeDocument(project.currentDocument);
project.openDocument(schema);

预览

预览就是一个标准的 React 组件了， 具体可以看官方提供的例子， 只要能切换 schema 就能动态更换了。

<ReactRenderer
      className="lowcode-plugin-sample-preview-content"
      schema={data.schema}
      appHelper={{
        request,
        message,
      }}
      components={data.components}
    />

试了下也不可以

[yz1311]

registerPlugins

试了，没用，就算能避开报错，界面也是一片空白

[yuqixuan]

openDocument

我最开始就是先remove再open，但也不可以，iframe内部的节点依旧没有挂载，目前折中解决办法就是打开一个新的tab或者跳转路由后，页面进行一次刷新，但感觉很麻烦，感觉应该是引擎内部有缓存，导致节点没有重新挂载

[LeoYuan]

大家可以试试这个，有什么问题麻烦再反馈下~

https://github.com/alibaba/lowcode-engine/issues/1036#issuecomment-1250964169

[xiechong]

大家可以试试这个，有什么问题麻烦再反馈下~

#1036 (comment)

大家都没问题了吗，我这测试用最新1.0.15版本的引擎，跑lce-spa-umi-demo还是不行啊，返回后页面无法正常渲染

[hjgeek]

我是这么解决的, 可以切换了

// 初始化 ,会自动打开第一个页面
project.importSchema(projectSchema) 

// 切换页面时, 先remove, 然后传入 fileName 切换
project.removeDocument( project.currentDocument as any )
project.openDocument( fileName ) // 传入fileName string

若import后, 直接 project.openDocument( fileName ) ,发现画布变了, 但是schema不变, 判断是schema plugin 的bug 看了源码发现, 强行取的是 [0] 个, 这也解释了为什么先要remove然后再open..... , 只是为了让它成为第 [0] 个...

综上, 不是 engine 的问题, 改 plugin 吧

[dingyanhe]

这个是不是销毁一下组件就行了