不同页面的画布渲染相同的内容，跳转后节点会重复渲染

[565823371556Zsl]

问题描述

我有两个页面，简称页面a和b，它们都有一个自己一个graph。a页面和b页面都根据同一个json数据渲染图，但是当我在a页面渲染完图形后，通过路由跳转到b页面，在b页面中渲染相同的数据时，b页面的节点会出现多个，从b页面跳回a页面时，节点又会变多，具体情况如下

在a页面，点击编辑跳转到b页面

在b页面，json数据和a页面相同，但是节点渲染了多次

补充说明：渲染节点都是用的fromJSON这个函数，a,b页面两个画布的容器id也不同，我尝试在a页面中跳转之前使用dispose卸载graph，也没失效，我使用的是vue3框架

重现链接

暂无

重现步骤

我有两个页面，简称页面a和b，它们都有一个自己一个graph。a页面和b页面都根据同一个json数据渲染图，但是当我在a页面渲染完图形后，通过路由跳转到b页面，在b页面中渲染相同的数据时，b页面的节点会出现多个，从b页面跳回a页面时，节点又会变多，具体情况如下

预期行为

节点渲染正常

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• X6 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[565823371556Zsl]

选择的时候只有一个节点，但是却渲染出来了3个

[NewByVector]

是不是用到了 TeleportContainer？

[565823371556Zsl]

是不是用到了 TeleportContainer？

是的，使用它了

[565823371556Zsl]

是不是用到了 TeleportContainer？

问题已解决，确实是teleportContainer的问题，teleport.ts中只有一份items，所有画布都将内容存到了这里头，我新写了一个reset()函数，将items置空，isactive置false，在每个网页的画布挂载前reset一下，解决了这个问题

[lloydzhou]

https://vuejs.org/guide/built-ins/teleport.html#multiple-teleports-on-the-same-target

看表现似乎符合vue官方说的这个场景。

但是，x6-vue-shape内部实现的时候，这里的to属性使用的是HTMLDivElement，不是一个selector，所以感觉可能还是使用上的问题。或者是fromJSON处理方式上面的问题（可能没有正确触发VueShapeView.unmount函数？）

[zhangyucha0]

@NewByVector 请问有其他的解决方案吗，或者官方推荐此类场景下应该如何使用TeleportContainer？

teleport.ts

import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
import { Graph } from '@antv/x6'
import { VueShape } from './node'

let active = false
const items = reactive<{ [key: string]: any }>({})

...

看到还有类似的问题 #3821

[NewByVector]

@zhangyucha0 全局都使用一个 teleport。

[wangliqiang1026]

是不是没有用了TeleportContainer？

问题已解决，确实是teleportContainer的问题，teleport.ts中只有一部分items，所有的全部都将内容存到了这里头，我新写了一个reset()函数，将items置空，isactive置false，在每一个个网页的最少挂载前重置了一下，解决了这个问题

你好，请问一下具体解决方法是什么，遇到了同样的问题，目前还没有发布新版本解决

[KyleXie]

是不是用到了 TeleportContainer？

问题已解决，确实是teleportContainer的问题，teleport.ts中只有一份items，所有画布都将内容存到了这里头，我新写了一个reset()函数，将items置空，isactive置false，在每个网页的画布挂载前reset一下，解决了这个问题

@565823371556Zsl 我看 items 是非公开的属性，你是 fork 了源码做的更改吗？还是有什么黑科技？