🎈 perf(完成优化):

src/components/LabAndImg/index.tsx

@@ -19,7 +19,7 @@ type Param = {
   name?: string
 }
 export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
-  const [imgs, setImgs] = useState<string[]>([])
+  const [imgs, setImgs] = useState<string>('')
 
   //lab是否都是0
   const rgbStyle = useMemo(() => {
@@ -35,7 +35,7 @@ export default memo(({ value, onClick, showStatus = false, round = false, name =
       let imgs = value.texture_url.split(',').map((item) => {
         return formatImgUrl(item)
       })
-      setImgs(() => imgs)
+      setImgs(() => imgs[0])
     }
   }, [value])
 
@@ -50,10 +50,21 @@ export default memo(({ value, onClick, showStatus = false, round = false, name =
     setLabAndImgShow(true)
   }
 
+  const checkLoad = (val) => {
+    setImgs(() => formatImgUrl(''))
+  }
+
   return (
     <>
       <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
-        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
+        {value.texture_url && (
+          <Image
+            mode='aspectFill'
+            src={imgs}
+            onError={(e) => checkLoad(e)}
+            className={styles.labAndImg_image}
+            style={{ borderRadius: round ? '50%' : '' }}></Image>
+        )}
         {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
         {!value.texture_url && !rgbStyle && (
           <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>

src/components/sideBar/index.tsx

@@ -1,8 +1,8 @@
 import { ScrollView, View } from '@tarojs/components'
-import React, { memo, ReactNode, useEffect, useRef, useState } from 'react'
+import React, { memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
-import Taro, { useReady } from '@tarojs/taro'
+import Taro, { getCurrentInstance, useReady, useRouter } from '@tarojs/taro'
 import InfiniteScroll, { StatusParam } from '../infiniteScroll'
 import LoadingCard from '../loadingCard'
 import ProductClass from '@/pages/index/components/productClass'
@@ -73,7 +73,7 @@ export default memo(
       }
     }
 
-    useReady(() => {
+    useEffect(() => {
       Taro.nextTick(() => {
         let query = Taro.createSelectorQuery()
         query
@@ -85,16 +85,17 @@ export default memo(
             let ratio = 750 / clientWidth
             let height = clientHeight * ratio
             num_half.current = Math.ceil(height / 2 / heightItem)
+            console.log('num_half::', num_half)
             init()
           })
           .exec()
       })
-    })
+    }, [])
 
     //二级面料系列分类
     const [openClass, setOpenClass] = useState(false)
     const [classList, setClassList] = useState([])
-    const [classId, setClassId] = useState(0)
+    const [classId, setClassId] = useState(-1)
     const { fetchData } = GetClassList()
     const getClassData = async (id) => {
       let res = await fetchData({ id })
@@ -111,7 +112,7 @@ export default memo(
 
     const getSelectClass = (id) => {
       selectClass?.(id)
-      setClassId(id)
+      setClassId(() => id)
     }
 
     return (