feat:左侧树信息持久化

src/components/ItemTree/index.jsx

@@ -5,6 +5,7 @@ import "./index.less"
 const {Search} = Input;
 import {store} from "../../redux/store";
 import {clickFile} from "../../redux/clickFile_reducer";
+import {useSelector} from "react-redux";
 
 const defaultData = [];
 // 将树平铺用于查找
@@ -58,41 +59,34 @@ function generateChildList(fileList) {
 const ItemTree = () => {
     const [expandedKeys, setExpandedKeys] = useState([]);
     const [searchValue, setSearchValue] = useState('');
-    const [defaultValueState, setDefaultValueState] = useState([]);
+
     const [autoExpandParent, setAutoExpandParent] = useState(true);
 
-    useEffect(() => {
+    const defaultValueStateSet = [];
-        let unsubscribe = store.subscribe(() => {
+    let fileDirDate = useSelector(state => state.dirMessage.data);
-            let fileDirDate = store.getState().dirMessage.data;
+    if (fileDirDate.length>0){
-            if (fileDirDate.length===0){
+        for (let i = 0; i < fileDirDate.length; i++) {
-                return
+            const node = fileDirDate[i];
+            console.log("node:", node)
+            const {fileName, filePath, childList, dirFlag} = node;
+            const childListM = []
+            if (childList.length > 0) {
+                childListM.push(...generateChildList(childList));
             }
-            console.log("打开目录1fileDirDate:", fileDirDate)
+            if (defaultData.filter(fileMessage => fileMessage.key === filePath).length === 0) {
-            for (let i = 0; i < fileDirDate.length; i++) {
+                defaultData.push({
-                const node = fileDirDate[i];
+                    "key": filePath,
-                console.log("node:", node)
+                    "title": fileName,
-                const {fileName, filePath, childList, dirFlag} = node;
+                    "icon": <FolderOutlined/>,
-                const childListM = []
+                    "dirFlag": dirFlag,
-                if (childList.length > 0) {
+                    "children": childListM
-                    childListM.push(...generateChildList(childList));
+                });
-                }
-                if (defaultData.filter(fileMessage =>
-                    fileMessage.key === filePath
-                ).length === 0) {
-                    defaultData.push({
-                        "key": filePath,
-                        "title": fileName,
-                        "icon": <FolderOutlined/>,
-                        "dirFlag": dirFlag,
-                        "children": childListM
-                    });
-                }
             }
-            console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData)))
+        }
-            setDefaultValueState(Array.from(new Set(defaultData)))
+        console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData)))
-        })
+        defaultValueStateSet.push(...Array.from(new Set(defaultData)))
-        return ()=>unsubscribe()
+    }
-    }, [])
+    const [defaultValueState, setDefaultValueState] = useState(defaultValueStateSet);
 
     const onExpand = (newExpandedKeys) => {
         setExpandedKeys(newExpandedKeys);

src/redux/clickFile_reducer.js

@@ -7,6 +7,7 @@ export const clickFileSlice = createSlice({
         data: {}
     },
     reducers: {
+        // 点击文件添加item，设置单前文件
         clickFile: (state, action) => {
             console.log("clickFileSlice:clickFile", state, action)
             state.data=action.payload