fix: fix none selected tab problem and improve some to do not mutate …

…state directly
d3george · Apr 12, 2024 · 980ba7b · 980ba7b
1 parent 15cb730
commit 980ba7b
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/hooks/web/use-keepalive.ts b/src/hooks/web/use-keepalive.ts
@@ -27,16 +27,17 @@ export default function useKeepAlive() {
    */
   const closeTab = useCallback(
     (path = activeTabRoutePath) => {
-      if (tabs.length === 1) return;
-      const deleteTabIndex = tabs.findIndex((item) => item.key === path);
+      const tempTabs = [...tabs];
+      if (tempTabs.length === 1) return;
+      const deleteTabIndex = tempTabs.findIndex((item) => item.key === path);
       if (deleteTabIndex > 0) {
-        push(tabs[deleteTabIndex - 1].key);
+        push(tempTabs[deleteTabIndex - 1].key);
       } else {
-        push(tabs[deleteTabIndex + 1].key);
+        push(tempTabs[deleteTabIndex + 1].key);
       }
 
-      tabs.splice(deleteTabIndex, 1);
-      setTabs([...tabs]);
+      tempTabs.splice(deleteTabIndex, 1);
+      setTabs(tempTabs);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [activeTabRoutePath],
@@ -109,6 +110,8 @@ export default function useKeepAlive() {
   );
 
   useEffect(() => {
+    setTabs((prev) => prev.filter((item) => !item.hideTab));
+
     if (!currentRouteMeta) return;
     let { key } = currentRouteMeta;
     const { outlet: children, params = {} } = currentRouteMeta;
@@ -118,10 +121,6 @@ export default function useKeepAlive() {
     }
     const existed = tabs.find((item) => item.key === key);
 
-    tabs.forEach((item, i) => {
-      item.hideTab && tabs.splice(i, 1);
-    });
-
     if (!existed) {
       setTabs((prev) => [
         ...prev,