fix: 修复 Layer 初始化后异步事件监听改为同步监听 (#189)

* fix: 修复图层 dataUpdate 事件不触发的问题

* refactor: 优化 useLayerEvent 代码及注释

* chore: 升级版本号

* fix: 修复 useLayerEvent 绑定解绑触发问题

* chore: 升级版本号

---------

Co-authored-by: yanxiong <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/larkmap",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "A React toolkit for geospatial visualization based on L7",
   "license": "MIT",
   "main": "lib/index.js",

src/components/Layers/hooks/use-layer-event/index.ts

@@ -1,6 +1,6 @@
-import { useTrackedEffect, useUnmount } from 'ahooks';
-import { useMemo } from 'react';
-import type { Layer, LayerEventCallback, LayerEventProps } from '../../../../types';
+import { useUnmount } from 'ahooks';
+import { useEffect, useMemo, useRef } from 'react';
+import type { Layer, LayerEventProps } from '../../../../types';
 import { LayerEventMap } from './constant';
 
 export const useLayerEvent = (
@@ -11,31 +11,42 @@ export const useLayerEvent = (
   // LarkMap 事件名列表
   const layerEventList = useMemo(() => Object.keys(layerEventMap), [layerEventMap]);
 
-  useTrackedEffect(
-    (changeIndexList: number[], previousDeps: LayerEventCallback[] = [], currentDeps: LayerEventCallback[] = []) => {
-      changeIndexList.forEach((index) => {
-        const eventName = layerEventMap[layerEventList[index]] as string;
-        const previousCallback = previousDeps[index];
-        const currentCallback = currentDeps[index];
-        // 分别注销旧的事件回调并绑定新的事件
-        if (previousCallback) {
-          layer.off(eventName, previousCallback);
-        }
-        if (currentCallback) {
-          layer.on(eventName, currentCallback);
-        }
-      });
-    },
-    layerEventList.map((eventName) => props[eventName]),
-  );
+  // 绑定或解绑所有事件的回调函数
+  const handleLayerEvents = (type: 'on' | 'off') => {
+    layerEventList.forEach((callbackName) => {
+      const eventName = layerEventMap[callbackName];
+      const callback = props[callbackName];
 
-  useUnmount(() => {
-    layerEventList.forEach((key) => {
-      const eventName = layerEventMap[key];
-      const callback = props[key];
-      if (eventName && callback) {
-        layer.off(eventName, callback);
+      if (callbackName && callback) {
+        layer[type](eventName, callback);
       }
     });
+  };
+
+  const bindLayerEvents = () => handleLayerEvents('on');
+
+  const unbindLayerEvents = () => handleLayerEvents('off');
+
+  const isFirstRef = useRef(true);
+
+  // 保证图层初始化后同步执行事件绑定，而不是在 useEffect 中异步绑定事件
+  if (isFirstRef.current) {
+    bindLayerEvents();
+  }
+
+  useEffect(() => {
+    if (isFirstRef.current) {
+      isFirstRef.current = false;
+    } else {
+      bindLayerEvents();
+    }
+    return () => {
+      unbindLayerEvents();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, layerEventList.map((eventName) => props[eventName]));
+
+  useUnmount(() => {
+    unbindLayerEvents();
   });
 };

src/version.ts

@@ -1 +1 @@
-export default '1.4.3';
+export default '1.4.5';