fix: 需要在每次更新 coord 前清理已销毁的组件

antvis · Oct 8, 2023 · a2139b9 · a2139b9
1 parent 506bc33
commit a2139b9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 19 deletions.
diff --git a/packages/f2/src/chart/index.tsx b/packages/f2/src/chart/index.tsx
@@ -103,8 +103,7 @@ class Chart<
 
     const { scale: scaleOptions, coord: coordOption } = props;
 
-    const style = this.getStyle(props);
-    coord.updateLayout(style);
+    this.resetCoordLayout();
 
     // 初始化 scale
     scale.create(scaleOptions);
@@ -136,8 +135,6 @@ class Chart<
 
   willUpdate(): void {
     this.coord.create(this.props.coord);
-    // 清除已经卸载的component对应的position缓存
-    this.removeComponentsPositionCache();
   }
 
   on(eventName: string, listener: (...args: any[]) => void) {
@@ -190,6 +187,8 @@ class Chart<
 
       // 先重置，然后整体重新算一次
       this.resetCoordLayout();
+      // 再整体计算前，需要去掉已经销毁的组件
+      this.removeComponentsPositionCache();
       componentsPosition.forEach((componentPosition) => {
         const { layout } = componentPosition;
         this.updateCoordLayout(layout);
@@ -204,11 +203,11 @@ class Chart<
 
   removeComponentsPositionCache() {
     if (!this.componentsPosition?.length) return;
-    
-    for(let i = this.componentsPosition.length; i > -1; i--) {
+
+    for (let i = this.componentsPosition.length; i > -1; i--) {
       const item = this.componentsPosition[i];
       if (item && item.component && item.component.destroyed) {
-        this.componentsPosition.splice(i, 1)
+        this.componentsPosition.splice(i, 1);
       }
     }
   }

diff --git a/packages/f2/test/chart/changeDataWithUndefined.test.tsx b/packages/f2/test/chart/changeDataWithUndefined.test.tsx
@@ -21,9 +21,7 @@ describe('Chart', () => {
   it('Chart 切换data为undefined', async () => {
     const { props } = (
       <Canvas context={context} pixelRatio={1}>
-        <Chart<TRecord>
-          data={data}
-        >
+        <Chart<TRecord> data={data}>
           <Axis field="genre" />
           <Axis<TRecord> field="sold" />
           <Interval<TRecord> x="genre" y="sold" color="genre" />
@@ -37,9 +35,7 @@ describe('Chart', () => {
     canvas.update(
       (
         <Canvas context={context} pixelRatio={1} animate={false}>
-          <Chart
-            data={undefined}
-          >
+          <Chart data={undefined}>
             <Axis field="genre" />
             <Axis field="sold" />
             <Interval x="genre" y="sold" color="genre" />
@@ -53,9 +49,7 @@ describe('Chart', () => {
     canvas.update(
       (
         <Canvas context={context} pixelRatio={1} animate={false}>
-          <Chart
-            data={data}
-          >
+          <Chart data={data}>
             <Axis field="genre" />
             <Axis field="sold" />
             <Interval x="genre" y="sold" color="genre" />
@@ -69,9 +63,7 @@ describe('Chart', () => {
     canvas.update(
       (
         <Canvas context={context} pixelRatio={1} animate={false}>
-          <Chart
-            data={data.slice(0, 5)}
-          >
+          <Chart data={data.slice(0, 5)}>
             <Axis field="genre" />
             <Axis field="sold" />
             <Interval x="genre" y="sold" color="genre" />