[V5] Dragging the canvas in nextjs leaves the same layout at the initial position

[recursively]

Describe the bug / 问题描述

版本5.0.19，在nextjs中拖动画布会在初始位置留下相同的布局，使用示例为官方示例

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

官方示例代码：

import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/cluster.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      node: {
        style: {
          labelText: (d) => d.id,
          ports: [],
        },
        palette: {
          type: 'group',
          field: 'cluster',
        },
      },
      layout: {
        type: 'd3-force',
        collide: {
          strength: 0.5,
        },
      },
      behaviors: ['zoom-canvas', 'drag-canvas'],
    });

    graph.render();
  });

初始布局：

拖动后会在初始位置留下一模一样的布局：

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome, Edge

Additional context / 补充说明

No response

[resetsix]

Next.js中没有试过，我使用 CRA 暂时没有遇到过这个问题。

[Aarebecca]

这种情况下你需要检查是否多次创建了 Graph 实例

[resetsix]

参考一下：https://github.com/antvis/X6/issues/4430

因为React中默认开启StrictMode， 开发环境下Mount会执行两次, 导致创建了两个实例，这种情况下需要做一次销毁

解决方案：要么关闭严格模式，要么保证在每次渲染时销毁上一次的 graph 实例。

useEffect(() => {
  return () => graph?.dispose();
}, []);