V5 使用 chart.changeData 更新数据，会出现重影，以及布局错乱等情况 #5736

问题描述

当前版本 @antv/g2@5.1.6

使用以下方式会出问题

  useEffect(() => {
    const chart = new Chart({
      container: refContainer.current!,
      autoFit: true,
      marginRight: 40,
    });

    chart.options({
      data: [],
      // ...
    });

    chart.render();
    refChart.current = chart;

    return () => {
      chart.destroy();
      refChart.current = undefined;
    };
  }, []);

  useEffect(() => {
    const chart = refChart.current;
    chart?.changeData(data);
  }, [data]);

使用以下方式可以临时解决

  useEffect(() => {
    const chart = refChart.current || new Chart({
      container: refContainer.current!,
      autoFit: true,
      marginRight: 40,
    });

    chart.options({
      data: data || [],
      // ...
    });

    chart.render();
    refChart.current = chart;

    return () => {
      chart.clear();
      // chart.destroy();
      // refChart.current = undefined;
    };
  }, [data]);

  useEffect(() => {
    const chart = refChart.current;

    return () => {
      chart?.destroy();
      refChart.current = undefined;
    };
  }, []);

  // useEffect(() => {
  //   const chart = refChart.current;
  //   chart?.changeData(data);
  // }, [data]);

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome

屏幕截图或视频（可选）

No response

补充说明（可选）

No response