fix: 优化withKeepAliveOverlay的参数依赖管理，修复不强制渲染时无法取消挂载的情况

msgbyte · Dec 18, 2022 · 42e004c · 42e004c
1 parent 4e21735
commit 42e004c
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/client/web/src/components/KeepAliveOverlay/withKeepAliveOverlay.tsx b/client/web/src/components/KeepAliveOverlay/withKeepAliveOverlay.tsx
@@ -19,7 +19,9 @@ export function withKeepAliveOverlay<
   OP extends Omit<P, 'className' | 'style'> = Omit<P, 'className' | 'style'>
 >(
   OriginComponent: React.ComponentType<OP>,
-  config: { cacheId: string | ((props: OP) => string) }
+  config: {
+    cacheId: string | ((props: OP) => string);
+  }
 ) {
   // eslint-disable-next-line react/display-name
   return (props: P) => {
@@ -32,15 +34,15 @@ export function withKeepAliveOverlay<
       }
 
       return config.cacheId;
-    }, []);
+    }, [originProps]);
 
     useEffect(() => {
       mount(cacheId, <OriginComponent key={cacheId} {...originProps} />);
 
       return () => {
         hide(cacheId);
       };
-    }, []);
+    }, [cacheId]);
 
     useEffect(() => {
       if (!containerRef.current) {
@@ -72,7 +74,7 @@ export function withKeepAliveOverlay<
           resizeObserver.unobserve(containerRef.current);
         }
       };
-    }, []);
+    }, [cacheId]);
 
     return (
       <div