From 5ade223021e54ace30ebfa60b31a38a403394a09 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Mon, 8 Jan 2018 11:35:00 +0800
Subject: [PATCH] 1. fixed TagCloud unmount setState 2. fixed PageHeader key
 warning 3. fixed MiniArea key warning

---
 src/components/Charts/MiniArea/index.js | 20 ++++++++++++++++++--
 src/components/Charts/TagCloud/index.js | 23 +++++++++++++++++------
 src/layouts/PageHeaderLayout.js         |  2 +-
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 2fc1fc82..a5526a95 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -56,8 +56,24 @@ export default class MiniArea extends React.Component {
               data={data}
               padding={padding}
             >
-              <Axis name="x" label={false} line={false} tickLine={false} grid={false} {...xAxis} />
-              <Axis name="y" label={false} line={false} tickLine={false} grid={false} {...yAxis} />
+              <Axis
+                key="axis-x"
+                name="x"
+                label={false}
+                line={false}
+                tickLine={false}
+                grid={false}
+                {...xAxis}
+              />
+              <Axis
+                key="axis-y"
+                name="y"
+                label={false}
+                line={false}
+                tickLine={false}
+                grid={false}
+                {...yAxis}
+              />
               <Tooltip showTitle={false} crosshairs={false} />
               <Geom
                 type="area"
diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js
index 6f11c479..77e63fa7 100644
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@@ -31,6 +31,7 @@ class TagCloud extends Component {
   }
 
   componentWillUnmount() {
+    this.isUnmount = true;
     window.removeEventListener('resize', this.resize);
   }
 
@@ -87,18 +88,14 @@ class TagCloud extends Component {
     const h = height * 4;
     const w = this.root.offsetWidth * 4;
 
-    const imageMask = new Image();
-    imageMask.crossOrigin = '';
-    imageMask.src = imgUrl;
-
-    imageMask.onload = () => {
+    const onload = () => {
       const dv = new DataSet.View().source(data);
       const range = dv.range('value');
       const [min, max] = range;
       dv.transform({
         type: 'tag-cloud',
         fields: ['name', 'value'],
-        imageMask,
+        imageMask: this.imageMask,
         font: 'Verdana',
         size: [w, h], // 宽高设置最好根据 imageMask 做调整
         padding: 5,
@@ -112,12 +109,26 @@ class TagCloud extends Component {
         },
       });
 
+      if (this.isUnmount) {
+        return;
+      }
+
       this.setState({
         dv,
         w,
         h,
       });
     };
+
+    if (!this.imageMask) {
+      this.imageMask = new Image();
+      this.imageMask.crossOrigin = '';
+      this.imageMask.src = imgUrl;
+
+      this.imageMask.onload = onload;
+    } else {
+      onload();
+    }
   };
 
   render() {
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 43ba3892..2c615e89 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -6,7 +6,7 @@ import styles from './PageHeaderLayout.less';
 export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
-    <PageHeader {...restProps} linkElement={Link} />
+    <PageHeader key="pageheader" {...restProps} linkElement={Link} />
     {children ? <div className={styles.content}>{children}</div> : null}
   </div>
 );
-- 
GitLab