fix: 修复 keep alive 插件中当前路由下清空缓存不生效的问题

alitajs · Jun 16, 2022 · a215b4e · a215b4e
2 parents 6513de2 + cd85464
commit a215b4e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/plugins/templates/keepalive/context.tpl b/packages/plugins/templates/keepalive/context.tpl
@@ -31,11 +31,10 @@ export function useKeepOutlets() {
     const element = useOutlet();
 {{#hasTabsLayout}}    
     const navigate = useNavigate();
-    const [panel, setPanel] = useState();
   const runtime = getPluginManager().applyPlugins({ key: 'tabsLayout',type: 'modify', initialValue: {} });
 const {local} = runtime;
 {{/hasTabsLayout}}
-    const { keepElements, keepalive, dropByCacheKey } = React.useContext<any>(KeepAliveContext);
+    const { cacheKeyMap, keepElements, keepalive, dropByCacheKey } = React.useContext<any>(KeepAliveContext);
     const isKeep = isKeepPath(keepalive, location.pathname);
     if (isKeep) {
         keepElements.current[location.pathname] = element;
@@ -63,10 +62,8 @@ const {local} = runtime;
                         newActiveKey = newPanes[0];
                     }
                 }
-                dropByCacheKey(targetKey);
-                // 这里只是为了刷新 tabs layout，不然需要到下一次渲染才能移除 dom
-                setPanel(Object.keys(keepElements.current));
                 if (newActiveKey !== location.pathname) {
+                    dropByCacheKey(targetKey);
                     navigate(newActiveKey);
                 } else if (lastIndex === -1 && targetKey === location.pathname) {
                     message.info('至少要保留一个窗口');
@@ -80,7 +77,7 @@ const {local} = runtime;
 {{/hasTabsLayout}}
         {
             Object.entries(keepElements.current).map(([pathname, children]: any) => (
-                <div key={pathname} style={ { height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto' } } className="rumtime-keep-alive-layout" hidden={!matchPath(location.pathname, pathname)}>
+                <div key={`${pathname}:${cacheKeyMap[pathname] || '_'}`} style={ { height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto' } } className="rumtime-keep-alive-layout" hidden={!matchPath(location.pathname, pathname)}>
                     {children}
                 </div>
             ))

diff --git a/packages/plugins/templates/keepalive/runtime.tpl b/packages/plugins/templates/keepalive/runtime.tpl
@@ -3,14 +3,18 @@ import { KeepAliveContext } from './context';
 
 const KeepAliveLayout = (props)=>{
   const keepElements = React.useRef<any>({})
-
+  const [cacheKeyMap, setCacheKeyMap] = React.useState({})
   function dropByCacheKey(path: string) {
     if(keepElements.current[path]){
       delete keepElements.current[path];
+      setCacheKeyMap(cacheKeyMap => ({
+        ...cacheKeyMap,
+        [path]: Math.random()
+      }))
     }
   }
   return (
-    <KeepAliveContext.Provider value={ { keepalive: [{{{ keepalive }}}], keepElements, dropByCacheKey } } {...props}/>
+    <KeepAliveContext.Provider value={ { keepalive: [{{{ keepalive }}}], keepElements, dropByCacheKey, cacheKeyMap } } {...props}/>
   )
 }
 export function rootContainer(container) {