feat:setExpandedKeys

src/components/ItemTree/index.jsx

@@ -6,7 +6,7 @@ import "./index.less"
 
 const {Search} = Input;
 import {useSelector, useDispatch} from "react-redux";
-import {addTableBarItem} from "../../redux/tableBarItem_reducer";
+import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer";
 import {readDir} from "../../utils/File";
 import {nextDirAdd} from "../../redux/dirMessage_reducer";
 // const defaultData = [];
@@ -127,9 +127,10 @@ const flushTree = (fileDirDate) => {
 }
 const ItemTree = (prop) => {
     console.log("prop.filePath:", prop.filePath)
-    const [expandedKeys, setExpandedKeys] = useState([]);
-    const [searchValue, setSearchValue] = useState('');
     const dispatch = useDispatch()
+    // const [expandedKeys, setExpandedKeys] = useState([]);
+    const expandedKeys = useSelector(state => state.tableBarItem.expandedKeyList)
+    const [searchValue, setSearchValue] = useState('');
     const [autoExpandParent, setAutoExpandParent] = useState(true);
     // let filePath = useSelector(state => state.dirMessage.data);
     const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath));
@@ -137,7 +138,7 @@ const ItemTree = (prop) => {
         setDefaultValueState(flushTree(prop.filePath))
     }, [prop]);
     const onExpand = (newExpandedKeys) => {
-        setExpandedKeys(newExpandedKeys);
+        dispatch(setExpandedKeys(newExpandedKeys));
         setAutoExpandParent(false);
     };
 
@@ -163,7 +164,7 @@ const ItemTree = (prop) => {
                 return null;
             })
             .filter((item, i, self) => !!(item && self.indexOf(item) === i));
-        setExpandedKeys(newExpandedKeys);
+        dispatch(setExpandedKeys(newExpandedKeys));
         setSearchValue(value);
         setAutoExpandParent(true);
     };
@@ -185,8 +186,7 @@ const ItemTree = (prop) => {
                     })
                 }
                 // 打开当前目录
-                expandedKeys.push(e.node.key)
+                dispatch(addExpandedKeys([e.node.key]));
-                setExpandedKeys([...expandedKeys]);
                 setAutoExpandParent(false);
             } else {
                 // 打开文件
@@ -244,6 +244,8 @@ const ItemTree = (prop) => {
                 // 是否自动展开父节点
                 autoExpandParent={autoExpandParent}
                 showIcon={true}
+                defaultSelectedKeys={[useSelector(state => state.tableBarItem.activeKey)]}
+                defaultExpandedKeys={useSelector(state => state.tableBarItem.expandedKeyList)}
                 // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
                 treeData={defaultValueState}
                 onSelect={onSelect}

src/redux/tableBarItem_reducer.js

@@ -14,7 +14,8 @@ export const tableBarItemSlice = createSlice({
     initialState: {
         type:"tableBarItem",
         data: [],
-        activeKey:""
+        activeKey:"",
+        expandedKeyList:[]
     },
     reducers: {
         addTableBarItem: (state, action) => {
@@ -55,11 +56,25 @@ export const tableBarItemSlice = createSlice({
                 }
             })
             state.activeKey = action.payload.filePath
+        },
+        addExpandedKeys:(state, action)=>{
+            state.expandedKeyList.push(...action.payload)
+            state.expandedKeyList=Array.from(new Set([...state.expandedKeyList]))
+        },
+        setExpandedKeys:(state, action)=>{
+            state.expandedKeyList=action.payload
+        },
+        removeExpandedKeys:(state, action)=>{
+            state.expandedKeyList=state.expandedKeyList.filter(key=>key!==action.payload)
         }
     }
 })
 export const { addTableBarItem,
     removeTableBarItem,
     setActiveKey,
-    updatedSavedFile} = tableBarItemSlice.actions
+    updatedSavedFile,
+    setExpandedKeys,
+    removeExpandedKeys,
+    addExpandedKeys
+} = tableBarItemSlice.actions
 export default tableBarItemSlice.reducer