[V5] 正确的重置画布的方法是什么？

[recursively]

我在nextjs中使用如下方式渲染画布：

useEffect(() => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const width = container.scrollWidth;
        const height = container.scrollHeight;

        const existingTooltips = document.querySelectorAll('.tooltip');
        existingTooltips.forEach(tooltip => tooltip.remove());

        if (graphRef.current) {
            graphRef.current.stopLayout();
            graphRef.current.off();
            graphRef.current.clear().then(r => {
            });
            graphRef.current = null;
        }

        const graph = new Graph({
            container,
            width,
            height,
            node: {
                style: {
                    labelPlacement: 'center',
                    labelText: (d: any) => d.data.properties.name,
                    labelFontSize: 3,
                    ports: [],
                    labelWordWrap: true,
                    labelWordWrapWidth: 50,
                    // labelMaxWidth: '90%',
                },
                palette: {
                    color: 'blues',
                    type: 'group',
                    field: 'marker',
                    invert: true,
                },
                state: {
                    highlight: {
                        fill: '#f56628',
                        halo: true,
                        lineWidth: 0,
                    },
                    dim: {
                        fill: '#99ADD1',
                    },
                },
            },
            edge: {
                style: {
                    endArrow: true,
                    endArrowSize: 6,
                    labelWordWrap: true,
                    labelMaxWidth: '80%',
                },
            },
            layout: {
                type: 'd3-force',
                collide: {
                    strength: 0.5,
                },
                link: {
                    distance: 80,
                },
            },
            behaviors: [
                'zoom-canvas',
                'drag-canvas',
                'drag-element',
                'click-select',
                {
                    type: 'hover-activate',
                    enable: (event: { targetType: string; }) => event.targetType === 'node',
                    degree: 1, // 👈🏻 Activate relations.
                    state: 'highlight',
                    inactiveState: 'dim',
                    onHover: (event: { view: { setCursor: (arg0: string) => void; }; }) => {
                        event.view.setCursor('pointer');
                    },
                    onHoverEnd: (event: { view: { setCursor: (arg0: string) => void; }; }) => {
                        event.view.setCursor('default');
                    },
                },
            ],
            autoFit: {
                type: 'view',
            },
            plugins: [
                {
                    type: 'tooltip',
                    // trigger: 'click',
                    getContent: (e: any, items: any[]) => {
                        let result = '';
                        items.forEach((item) => {
                            const name = item.data.properties ? (item.data.properties.name || 'Unknown') : 'Unknown';
                            result += `<p><strong>Name:</strong> <span class="break-words break-all">${name}</span></p>`;
                            result += `<p><strong>Type:</strong> <span class="break-words break-all">${item.data.marker}</span></p>`;
                        });
                        return result;
                    },
                },
                {key: 'minimap', type: 'minimap'},
            ],
        });

        graphRef.current = graph;

        function shortenString(str: string, maxLength: number) {
            if (str.length <= maxLength) {
                return str;
            }
            let startStr = str.substring(0, Math.floor(maxLength / 2) - 1);
            let endStr = str.substring(str.length - Math.floor(maxLength / 2), str.length);
            return `${startStr}...${endStr}`;
        }

        graph.setData({
            nodes: data.nodes.map((node: { data: any }) => ({
                ...node,
                label: shortenString(node.data.properties.name, 15),
            })),
            edges: data.edges.map(function (edge: { id: string }, i: string) {
                edge.id = 'edge' + i;
                return Object.assign({}, edge);
            }),
        });

        graph.render();

        graph.on(NodeEvent.CLICK, (event: any) => {
            const { target } = event;

            const parentData = graph.getRelatedEdgesData(target.id, 'out');
            console.log('parentData', parentData);
        });

        graph.setTheme(theme === 'dark' ? 'dark' : 'light');

        return () => {
            if (graphRef.current) {
                graphRef.current.destroy();
                // graphRef.current.clear().then(r => {
                // });
                graphRef.current = null;
            }
        };
    }, [data]);

我这里没有使用destroy()来销毁画布，因为我在页面刚刷新的时候就报“The graph instance has been destroyed”的错误，但是如果使用我上述的代码，在布局没有结束的时候，更新数据，此时会报如下错误：

所以是不是我重置画布的方式有问题？destroy()方法我在V4里面用是没有问题的，切换到V5过后直接不能用了。

[resetsix]

不需要监听 data 吧

[Aarebecca]

在 React 严格模式下，出现 Graph destroy 方法被意外调用的问题比较常见，你可以参考如下实现进行调整以避免该问题：
https://github.com/antvis/G6/blob/v5/packages/g6-extension-react/src/graph/graph.tsx

[recursively]

即便是使用了destroy来重置画布，截图中的问题依然无法避免：

如果在布局没有结束的时候更新options或者数据来重新渲染，就会报这个错

[recursively]

即使禁用了strict模式，destroy()方法依然存在“The graph instance has been destroyed”的问题，并且我也按照这个示例做了测试：https://github.com/antvis/G6/blob/v5/packages/g6-extension-react/src/graph/graph.tsx
在render()没有结束的时候数据一旦发生了更新，能百分百复现上面截图这个问题，我排查了一下，原因可能是出在调用clear()或者destroy()方法的时候数据清除了，但是布局并没有停止。

[resetsix]

antvis/X6#4430 (comment)

你参考下这个有没有用

[recursively]

这个issue解决不了我说的问题，你们可以试一下在布局没有结束的时候更改options，应该能复现截图里这个问题，而且在布局没有结束的时候渲染新的数据是比较常见的场景。