fix: 偶发removeChild 错误

CHANGELOG.md

@@ -1,18 +1,23 @@
 
-### 4.0.11 (2020-07-23)
-##### g2依赖 升级
+## 4.0.12 
 - [email protected]
 - [email protected]
 ##### bugfix
-- react-reconciler required but not add into deps #1219
-- Duplicate export #1221
-- 修复Coordinate组件的action属性
-- 和Tooltip 点击后才展示。
+- Tooltip triggerOn="click" 点击后才展示。
+- 图表销毁和react销毁顺序问题导致，自定义tooltip 偶发removeChild 错误。
 ##### feature
+- 新增 LineAdvance 的图形组件。
 - 图表联动，当前支持没有设置adjust的图表联动。详细见Tooltip linkage 属性文档。
 - Tooltip 点击后锁定位置。详见 Tooltip lock 属性文档。
-- 新增 LineAdvance 的图形组件。
 
+### 4.0.11 (2020-07-23)
+##### g2依赖 升级
+- [email protected]
+- [email protected] 
+##### bugfix
+- react-reconciler required but not add into deps #1219
+- Duplicate export #1221
+- 修复Coordinate组件的action属性
 
 ### 4.0.10 (2020-07-14)
 ##### g2依赖 升级

__stories__/feature.stories.tsx

@@ -12,6 +12,7 @@ import ChartManager from '../demos/features/chartManager';
 import Filter from '../demos/features/filter';
 import Reconciler from '../demos/features/fiber-reconciler';
 import TooltipLinkage from '../demos/features/tooltip-linkage';
+import JsxTooltip from '../demos/features/JsxTooltip';
 
 storiesOf('features', module)
   .add('Pure', Pure)
@@ -24,4 +25,5 @@ storiesOf('features', module)
   .add('chartManager', ChartManager)
   .add('filter', Filter)
   .add('TooltipLinkage', TooltipLinkage)
+  .add('JsxTooltip', JsxTooltip)
   .add('reconciler', () => <Reconciler />);

demos/features/JsxTooltip.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState, useRef } from "react";
+import {
+  Chart,
+  Interval,
+  Tooltip,
+  Effects,
+  G2,
+  Coordinate
+} from "../../src";
+
+const data1 = [
+  { year: "1991", value: 3 },
+  { year: "1992", value: 4 },
+  { year: "1993", value: 3.5},
+  { year: "1994", value: 5},
+  { year: "1995", value: 4.9},
+  { year: "1996", value: 6},
+  { year: "1997", value: 7},
+  { year: "1998", value: 9},
+  { year: "1999", value: 13}
+];
+
+const data2 = [
+  { year: "1991", value: 13 },
+  { year: "1992", value: 44 },
+  { year: "1993", value: 13.5},
+  { year: "1994", value: 55},
+  { year: "1995", value: 42.9},
+  { year: "1996", value: 36},
+  { year: "1997", value: 27},
+  { year: "1998", value: 39},
+  { year: "1999", value: 13}
+];
+
+const data3 = [
+  { year: "1991", value: 33 },
+  { year: "1992", value: 24 },
+  { year: "1993", value: 31.5},
+  { year: "1994", value: 52},
+  { year: "1995", value: 242.9},
+  { year: "1996", value: 6},
+  { year: "1997", value: 57},
+  { year: "1998", value: 29},
+  { year: "1999", value: 13}
+];
+
+
+
+const Basic = () => {
+  const [ data, setData ] = useState(data1);
+  const div = useRef(null);
+  console.log(G2);
+
+  useEffect(() => {
+    // setInterval(() => {
+    //   const count = Math.random();
+    //   if (count > 0.8) {
+    //     setData(data1);
+    //     return;
+    //   }
+    //   if (count > 0.5) {
+    //     setData(data1);
+    //     return;
+    //   }
+    //   if (count > 0.2) {
+    //     setData(data1);
+
+    //   }
+    // }, 2000)
+  }, [])
+  return (
+    <div style={{ width: 800 }} >
+      <div onClick={() => {
+        const count = Math.random();
+        if (count > 0.8) {
+          setData(data1);
+          return;
+        }
+        if (count > 0.5) {
+          setData(data2);
+          return;
+        }
+        if (count > 0.2) {
+          setData(data3);
+
+        }
+      }}>click me</div>
+    <Chart data={data} width={300} height={300} >
+      <Interval position="year*value" />
+      <Coordinate transpose />
+      <Tooltip>
+        {
+          (title) => {
+            return title;
+          }
+        }
+      </Tooltip>
+    </Chart>
+    <Chart data={data} width={500} height={300} autoFit={!(Math.random()>0.5)} >
+      <Interval position="year*value" />
+      <Coordinate transpose />
+      <Tooltip>
+        {
+          (title) => {
+            return <div>{title}</div>;
+          }
+        }
+      </Tooltip>
+    </Chart>
+    </div>
+  );
+}
+
+export default Basic;

src/components/Chart/chartHelper.ts

@@ -192,7 +192,12 @@ class ChartHelper {
       return;
     }
     this.extendGroup = null;
-    this.chart.destroy();
+    let chart = this.chart;
+    setTimeout(() => {
+      // 大坑勿改: 这样做是为了等react 先卸载，再销毁图表实例。
+      chart.destroy();
+      chart = null;
+    }, 0)
     this.chart = null;
     this.config = {};
   }