🐞 fix(ID1001331色卡图片跟着跳动):

src/pages/colorCardList/components/productItem/index.tsx

@@ -10,7 +10,8 @@ interface ProductItemParamType {
   id: number
   name: string
 }
-export interface ParamType {
+
+export interface ProductItemParam {
   id: number
   affiliation_product: ProductItemParamType[]
   color_card_name: string
@@ -18,8 +19,12 @@ export interface ParamType {
   lab: { l: number; a: number; b: number }
   rgb: { r: number; g: number; b: number }
   is_add: boolean
-  onSelect?: (val: ParamType, status: boolean) => void
   count?: number
+
+}
+export interface ParamType {
+  value: ProductItemParam
+  onSelect?: (val: ProductItemParam, status: boolean) => void
   selectList?: any[]
 }
 
@@ -27,32 +32,11 @@ export interface ParamType {
 const limit = 5
 
 export default memo((props: ParamType) => {
-  const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb, selectList } = props
+  const { selectList } = props
-  const [checkStatus, setCheckStatus] = useState(false)
-  const changeSelect = () => {
-    console.log('isDisabled', isDisabled)
-    if (props.is_add) { return false }
-    if (isDisabled) {
-      alert.none('每次最多申请5种面料')
-      return false
-    }
-    setCheckStatus(!checkStatus)
-    props.onSelect?.(props, !checkStatus)
-  }
-  const onSelect = () => {
-    if (props.is_add) { return false }
-    props.onSelect?.(props, true)
-    setCheckStatus(true)
-  }
-  const onClose = () => {
-    props.onSelect?.(props, false)
-    setCheckStatus(false)
-  }
-
   const isDisabled = useMemo(() => {
     const set = new Set(selectList?.map(item => item.id))
     if (selectList) {
-      if (set.has(props.id)) {
+      if (set.has(props.value.id)) {
         return false
       }
       return set.size >= limit
@@ -62,9 +46,37 @@ export default memo((props: ParamType) => {
     }
   }, [selectList])
 
+  return <Index value={props.value} onSelect={props.onSelect} isDisabled={isDisabled} />
+})
+
+const Index = memo((props: ParamType&{ isDisabled: boolean }) => {
+  console.log('刷新')
+  const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props.value
+  const { isDisabled } = props
+  const [checkStatus, setCheckStatus] = useState(false)
+  const changeSelect = () => {
+    console.log('isDisabled', isDisabled)
+    if (props.value.is_add) { return false }
+    if (isDisabled) {
+      alert.none('每次最多申请5种面料')
+      return false
+    }
+    setCheckStatus(!checkStatus)
+    props.onSelect?.(props.value, !checkStatus)
+  }
+  const onSelect = () => {
+    if (props.value.is_add) { return false }
+    props.onSelect?.(props.value, true)
+    setCheckStatus(true)
+  }
+  const onClose = () => {
+    props.onSelect?.(props.value, false)
+    setCheckStatus(false)
+  }
+
   const labAndImgObj = useMemo(
     () => {
-      return { lab: props.lab, rgb: props.rgb, texture_url: props.texture_url }
+      return { lab: props.value.lab, rgb: props.value.rgb, texture_url: props.value.texture_url }
     },
     [props],
   )
@@ -80,7 +92,7 @@ export default memo((props: ParamType) => {
       </View>
     </View>
     <View className={styles.checkBox} onClick={e => e.stopPropagation()}>
-      <Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add || isDisabled} onSelect={onSelect} onClose={onClose} />
+      <Checkbox status={props.value.is_add ? true : checkStatus} disabled={props.value.is_add || isDisabled} onSelect={onSelect} onClose={onClose} />
     </View>
   </View>
 })

src/pages/colorCardList/index.tsx

@@ -3,7 +3,7 @@ import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import classNames from 'classnames'
 import styles from './index.module.scss'
-import type { ParamType } from './components/productItem'
+import type { ParamType, ProductItemParam } from './components/productItem'
 import ProductItem from './components/productItem'
 import InfiniteScroll from '@/components/infiniteScroll'
 import Search from '@/components/search'
@@ -13,7 +13,7 @@ import { alert } from '@/common/common'
 
 export default () => {
   const { fetchData, state: cardState } = GetColorCardApi()
-  const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({
+  const [colorCardData, setColorCardData] = useState<{ list: ProductItemParam[]; total: number }>({
     list: [],
     total: 0,
   })
@@ -22,7 +22,7 @@ export default () => {
     size: 10,
   })
 
-  const shopColorCardData = useRef<ParamType[]>([])
+  const shopColorCardData = useRef<ProductItemParam[]>([])
 
   // 获取已加入购物车的数据id
   const getShopId = () => {
@@ -56,7 +56,9 @@ export default () => {
   }
 
   // 选择的数据
-  const [selectList, setSelectList] = useState<ParamType[]>([])
+  const [selectList, setSelectList] = useState<ProductItemParam[]>([])
+  const selectListRef = useRef<ProductItemParam[]>([])
+  useEffect(() => { selectListRef.current = selectList }, [selectList])
 
   // 数据加载状态
   const statusMore = useMemo(() => {
@@ -103,21 +105,19 @@ export default () => {
   // 多选
   const multipleSelection = useRef<any[]>([])
 
-  const onSelectData = (val, status) => {
+  const onSelectData = useCallback((val, status) => {
-    console.log('onSelectData', val, status)
-    console.log('selectList', selectList)
     if (status) {
       multipleSelection.current.push(val)
-      setSelectList(e => [val, ...e])
+      setSelectList(e => [val, ...selectListRef.current])
     }
     else {
-      const res = selectList?.filter((item) => {
+      const res = selectListRef.current?.filter((item) => {
         return val.id != item.id
       })
       multipleSelection.current = res
       setSelectList(res)
     }
-  }
+  }, [])
 
   return <View className={styles.main}>
     <View className={styles.search}>
@@ -135,7 +135,7 @@ export default () => {
         {colorCardData.list?.map((item) => {
           return (
             <View className={styles.get_card_list} key={item.id}>
-              <ProductItem selectList={selectList} {...item} onSelect={onSelectData} />
+              <ProductItem selectList={selectList} value={item} onSelect={onSelectData} />
             </View>
           )
         })}