更新

src/pages/InstallExe/index.tsx

@@ -32,31 +32,32 @@ const typeData = [
 interface PageProps { }
 
 const InstallExe: FC<PageProps> = ({ }) => {
-  const [listData, setListData] = useState([])
+  const [listData, setListData] = useState<any[]>([]);
   const [open1, setOpen1] = useState(false); // Gbase
 
   useEffect(() => {
     let data = localStorage.getItem('installExe');
-
-    data ?
-      setListData(JSON.parse(data)) :
-      localStorage.setItem('installExe', JSON.stringify(listData));
-  },[])
-
-  let sty = { width: '28.5%', padding: '7vh 3vh 3vh 3vh' };
+    if (data) {
+      setListData(JSON.parse(data));
+    } else {
+      localStorage.setItem('installExe', JSON.stringify(typeData));
+      setListData(typeData);
+    }
+  }, [])
 
   const itemDom = (item: any, index: number) => {
     return (
       <div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
         onClick={() => {
-          listData.forEach((data: any) => {
+          const updatedList = listData.map((data: any) => {
             if (data.name === item.name) {
-              if (data.select) return
-              openDialog(item.name)
-              data.select = !data.select;
+              if (data.select) return data;
+              openDialog(item.name);
+              return { ...data, select: !data.select };
             }
-          })
-          setListData([...listData])
+            return data;
+          });
+          setListData(updatedList);
         }}>
         {item.name}
       </div>
@@ -69,19 +70,14 @@ const InstallExe: FC<PageProps> = ({ }) => {
         setOpen1(true)
         break;
       case '':
-
         break;
       case '':
-
         break;
       case '':
-
         break;
       case '':
-
         break;
       case '':
-
         break;
     }
   }
@@ -91,23 +87,23 @@ const InstallExe: FC<PageProps> = ({ }) => {
       <div className={styles.title_con}>一体化对称密码管理系统</div>
       <div className='flex_acB_jE'>
         {/* 左 */}
-        <ContentWarp style={sty} text={'依赖程序'}>
-          {listData.length > 0 && listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
+        <ContentWarp style={{ width: '28.5%', padding: '7vh 3vh 3vh 3vh' }} text={'依赖程序'}>
+          {listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
         </ContentWarp>
 
         {/* 中 */}
-        <ContentWarp style={sty} text={'专用核心密码管理分系统'}>
-          {listData.length > 0 && listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
+        <ContentWarp style={{ width: '28.5%', padding: '7vh 3vh 3vh 3vh' }} text={'专用核心密码管理分系统'}>
+          {listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
         </ContentWarp>
 
         {/* 右 */}
         <div style={{ width: '28.5%' }}>
           <ContentWarp style={{ marginBottom: '8%', padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }} text={'一体化密码机'}>
-            {listData.length > 0 && listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
+            {listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
           </ContentWarp>
 
           <ContentWarp text={'JJP903C密码钥匙'} style={{ padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }}>
-            {listData.length > 0 && listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
+            {listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
           </ContentWarp>
         </div>
       </div>
@@ -115,7 +111,6 @@ const InstallExe: FC<PageProps> = ({ }) => {
         <ButtonComp text={'退出'} onClick={() => history.push('/index')} />
       </div>
 
-
       {/* 安装程序弹窗 */}
       <GBase open={open1} onCancel={() => setOpen1(false)}></GBase>
     </div>