🐞 fix(加入购物车): 修复图片闪烁的问题

src/components/LabAndImg/index.tsx

@@ -21,8 +21,6 @@ interface Param {
   suffix?: string
 }
 const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {}, suffix = '!w200' }: Param) => {
-  const [imgs, setImgs] = useState<string>('')
-
   // lab是否都是0
   const rgbStyle = useMemo(() => {
     if (value?.lab && (value?.lab.l || value?.lab.a || value?.lab.b)) {
@@ -33,12 +31,25 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
     }
   }, [value])
 
-  useEffect(() => {
+  // useEffect(() => {
+  //   if (value?.texture_url) {
+  //     const imgs = value.texture_url.split(',').map((item) => {
+  //       return formatImgUrl(item, suffix)
+  //     })
+  //     setImgs(() => imgs[0])
+  //   }
+  // }, [value])
+
+  const img = useMemo(() => {
+    console.log('update img')
     if (value?.texture_url) {
       const imgs = value.texture_url.split(',').map((item) => {
         return formatImgUrl(item, suffix)
       })
-      setImgs(() => imgs[0])
+      return imgs[0]
+    }
+    else {
+      return ''
     }
   }, [value])
 
@@ -47,14 +58,14 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
     setLabAndImgShow(false)
   }, [])
 
-  const onShowLabAndImg = (e) => {
+  const onShowLabAndImg = () => {
     onClick?.(value)
     if (!showStatus) { return false }
     setLabAndImgShow(true)
   }
 
   const checkLoad = (val) => {
-    setImgs(() => formatImgUrl(''))
+    // setImgs(() => formatImgUrl(''))
   }
 
   return (
@@ -64,7 +75,7 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '
           <Image
             lazyLoad
             mode="aspectFill"
-            src={imgs}
+            src={img}
             onError={e => checkLoad(e)}
             className={styles.labAndImg_image}
             style={{ borderRadius: round ? '50%' : '', ...customImageStyle }}