fix: change state Ctor error

Author: hustcc

demo/index.tsx

@@ -1,10 +1,9 @@
 import ReactDOM from 'react-dom';
-import React from 'react';
-import { Line } from '@antv/g2plot';
-
+import React, { useState, useEffect } from 'react';
+import { Line, Column } from '@antv/g2plot';
 import ReactG2Plot from '../src';
 
-const data = [
+const Data = [
   { year: '1991', value: 3 },
   { year: '1992', value: 4 },
   { year: '1993', value: 3.5 },
@@ -16,8 +15,7 @@ const data = [
   { year: '1999', value: 13 },
 ];
 
-// line chart config
-const config = {
+const LineConfig = {
   title: {
     visible: true,
     text: '曲线折线图',
@@ -28,17 +26,55 @@ const config = {
   },
   padding: 'auto',
   forceFit: true,
-  data,
+  data: Data,
   xField: 'year',
   yField: 'value',
   smooth: true,
 };
 
-function ref(plot) {
-  console.log('G2Plot instance Ref', plot);
+const ColumnConfig = {
+  title: {
+    visible: true,
+    text: '柱形图',
+  },
+  description: {
+    visible: true,
+    text: '使用柱形图展示每一年的对比情况。',
+  },
+  padding: 'auto',
+  forceFit: true,
+  data: Data,
+  xField: 'year',
+  yField: 'value',
+};
+
+function Entry() {
+  const [isLine, setIsLine] = useState<boolean>(true);
+
+  function ref(plot) {
+    console.log('G2Plot instance Ref', plot);
+  }
+
+  function getCtor() {
+    return isLine ? Line : Column;
+  }
+
+  function getConfig() {
+    return isLine ? LineConfig : ColumnConfig;
+  }
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      // 切换
+      setIsLine(!isLine);
+    }, 3000);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, [isLine]);
+
+  return <ReactG2Plot className="g2plot-for-react" Ctor={getCtor()} config={getConfig()} ref={ref} />;
 }
 
-ReactDOM.render(
-  <ReactG2Plot className="g2plot-for-react" Ctor={Line} config={config} ref={ref} />,
-  document.getElementById('root-container'),
-);
+ReactDOM.render(<Entry />, document.getElementById('root-container'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-g2plot",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Unofficial react component wrapper for @antv/g2plot.",
   "main": "lib/index.js",
   "module": "esm/index.js",

src/index.tsx

@@ -34,6 +34,7 @@ export default forwardRef((props: ReactG2PlotProps, ref: any) => {
   function newPlot() {
     if (plotRef.current) {
       plotRef.current.destroy();
+      plotRef.current = undefined;
     }
 
     plotRef.current = new Ctor($dom.current, config);
@@ -49,6 +50,7 @@ export default forwardRef((props: ReactG2PlotProps, ref: any) => {
     return () => {
       if (plotRef.current) {
         plotRef.current.destroy();
+        plotRef.current = undefined;
       }
     };
   }, [Ctor, config]);