From 5c9c8ad75d4b9ade6adb1cd68cb14fcbf41a2a4a Mon Sep 17 00:00:00 2001
From: zengyue <yezengyue@gmail.com>
Date: Fri, 29 Oct 2021 10:58:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dreact=20key=E4=B8=BAnu?=
 =?UTF-8?q?ll=E6=97=B6diff=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/f2-next/src/children.ts                |  6 +++---
 .../f2-next/src/components/line/lineView.tsx    | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/f2-next/src/children.ts b/packages/f2-next/src/children.ts
index e6f204f7d..9277d1ec0 100644
--- a/packages/f2-next/src/children.ts
+++ b/packages/f2-next/src/children.ts
@@ -1,4 +1,4 @@
-import { isArray } from '@antv/util';
+import { isArray, isNil } from '@antv/util';
 import { map } from './util';
 
 function cloneElement(element, props) {
@@ -22,7 +22,7 @@ function compareArray(
   const lastLength = lastElements.length;
   for (let i = 0, len = lastLength; i < len; i++) {
     const element = lastElements[i];
-    if (element && element.key !== undefined) {
+    if (element && !isNil(element.key)) {
       const { key } = element;
       keyed[key] = element;
     }
@@ -37,7 +37,7 @@ function compareArray(
     }
     const { key } = element;
     // 有key值定义
-    if (key !== undefined) {
+    if (!isNil(element.key)) {
       const lastElement = keyed[key];
       if (lastElement) delete keyed[key];
       compare(element, lastElement, callback);
diff --git a/packages/f2-next/src/components/line/lineView.tsx b/packages/f2-next/src/components/line/lineView.tsx
index 6eafb5e52..bee6e1047 100644
--- a/packages/f2-next/src/components/line/lineView.tsx
+++ b/packages/f2-next/src/components/line/lineView.tsx
@@ -11,10 +11,19 @@ export default (props: any) => {
             {dataArray.map((data) => (
               <polyline
                 attrs={{
-                  points: data,
-                  stroke:  color,
-                  lineWidth:size,
-                  ...shape
+                  points: data.map((item) => {
+                    return { x: item.x, y: item.y };
+                  }),
+                  stroke: color,
+                  lineWidth: size,
+                  ...shape,
+                }}
+                animation={{
+                  update: {
+                    easing: 'linear',
+                    duration: 450,
+                    property: ['points'],
+                  },
                 }}
               />
             ))}