🐞 fix(ID1000785): 底部导航栏【购物】点击没有做刷新

【底部导航栏【购物】点击没有做刷新】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000785

src/components/counter/index.tsx

@@ -2,6 +2,7 @@ import { Input, View } from "@tarojs/components"
 import { useEffect, useMemo, useRef, useState } from "react"
 import Big from 'big.js'
 import styles from "./index.module.scss"
+import { usePropsValue } from "@/use/useCommon"
 type params = {
     minNum?: number, //最小值
     maxNum?: number, //最大值
@@ -14,28 +15,31 @@ type params = {
     unit?: string,
     disable?: boolean, //是否禁用
 }
-export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
+export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange: onValueChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
-    const [value, setValue] = useState<any>({count:defaultNum})
+    const [value, setValue] = usePropsValue<number>({
-
+      value: defaultNum,
+      defaultValue: defaultNum,
+      onChange: (nextValue) => {
+        onValueChange && onValueChange(nextValue)
+      }
+    })
+    // 加号
     const onPlus = (event) => {
         event.stopPropagation()
         if (disable) return false
-        let { count } = value
+        let num_res = Big(value).add(step).toNumber()
-        let num_res = Big(count).add(step).toNumber()
         num_res = num_res >= maxNum ? maxNum : num_res
         num_res = formatDigits(num_res)
-        setValue({ ...value, count: num_res })
+        setValue(num_res)
-        onChange?.(parseFloat(num_res))
         onClickBtn?.(parseFloat(num_res))
     }
+    // 减号
     const minus = (event) => {
         event.stopPropagation()
         if(disable) return false
-        let {count} = value
+        let num_res = Big(value).minus(step).toNumber()
-        let num_res = Big(count).minus(step).toNumber()
         num_res = num_res < minNum ? minNum : num_res
-        setValue({...value, count:num_res})
+        setValue(num_res)
-        onChange?.(parseFloat(num_res))
         onClickBtn?.(parseFloat(num_res))
     }
 
@@ -63,27 +67,23 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
     const onInputEven = (e) => {
         let res = e.detail.value
         if(res === '') {
-            setValue({...value, count:minNum})
+            setValue(minNum)
-            onChange?.(minNum)
             return minNum
         }
         else if(!isNaN(Number(res))) {
             let count = formatDigits(res)
             count = checkData(count)
-            setValue({...value, count})
+            setValue(count as number)
-            onChange?.(parseFloat(count as string))
             return count
         } else {
             let num = parseFloat(res)
             if (!isNaN(num)) {
               let count = formatDigits(num)
               count = checkData(count)
-              setValue({ ...value, count })
+              setValue(count as number)
-              onChange?.(count as number)
               return count
             } else {
-              setValue({ ...value, count: defaultNum })
+              setValue(defaultNum)
-              onChange?.(defaultNum)
               return defaultNum
             }
             
@@ -91,17 +91,17 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
     }
 
     const onBluerEven = () => {
-        let num = parseFloat(value.count)
+        let num = parseFloat(String(value))
         console.log('onInputEven res===>', num)
 
         if (!isNaN(num)) {
           let count = formatDigits(num)
           count = checkData(count)
-          setValue({ ...value, count })
+          setValue(count as number)
           onBlue?.(count as number)
           return count
         } else {
-          setValue({ ...value, count: defaultNum })
+          setValue(defaultNum)
           onBlue?.(defaultNum)
           return defaultNum
         }
@@ -116,7 +116,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
           -
         </View>
         <View className={styles.input} onClick={noop}>
-          <Input value={String(value.count)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable} />
+          <Input value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable} />
           <View className={styles.unit}>{unit}</View>
         </View>
         <View className={styles.plus} onClick={onPlus}>

src/pages/shopping/components/colorKindItem/index.tsx

@@ -1,7 +1,7 @@
 import { View, Text, Image } from '@tarojs/components'
 import MCheckbox from '@/components/checkbox'
 import Counter from '@/components/counter'
-import { FC, forwardRef, memo, useCallback } from 'react'
+import { FC, forwardRef, memo, useCallback, useEffect, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import { debounce } from '@/common/util'
@@ -20,24 +20,35 @@ type PropsType = {
   }
   purchaserId: number
   itemData: Record<string, any> & object
-  orderType: EnumSaleMode
 }
 
-let ColorKindItem: FC<PropsType> = props => {
+const ColorKindItem: FC<PropsType> = props => {
-  const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
+  const { state, purchaserId, itemData } = props
   const dispatch = useShoppingDispatch()
-  // console.log('checked==>', checked)
+
+  //格式化数量
+  const formatCount = itemData => {
+    return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length)
+  }
+
+  useEffect(() => {
+    setCount(formatCount(itemData))
+  }, [itemData.roll, itemData.length])
+  
+
+  const [count, setCount] = useState(formatCount(itemData))
 
   //格式化金额
   const formatPrice = (price: number) => {
     return Number(formatPriceDiv(price))
   }
 
-  //格式化数量
+  const handleCountChange = (nextValue: number) => {
-  const formatCount = itemData => {
+    setCount(nextValue)
-    return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length)
   }
 
+  
+
   //格式化单位
   const formatUnit = itemData => {
     return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米'
@@ -78,7 +89,7 @@ let ColorKindItem: FC<PropsType> = props => {
   const { fetchData } = AdjestShoppingCartApi()
 
   // 调整条数/米数的接口  并在调整完成后重新请求整个购物车页面
-  const getInputValue = debounce(async (num, itemData) => {
+  const getInputValue = useCallback(debounce(async (num) => {
     console.log('num===>', num)
     const targetColor: Record<string, any> = {
       roll: 0,
@@ -99,7 +110,7 @@ let ColorKindItem: FC<PropsType> = props => {
     if (res.success) {
       state?.Observer?.notify(purchaserId)
     }
-  }, 460)
+  }, 460), [itemData])
 
   const labAndImgObj = useCallback(item => {
     return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url }
@@ -128,11 +139,12 @@ let ColorKindItem: FC<PropsType> = props => {
         <View className={styles['colorKindItem__right--price']}>￥ {formatPrice(itemData.sale_price)}/{itemData.sale_mode == EnumSaleMode.Plate ? '米' : 'kg'}</View>
         <View className={styles['colorKindItem__right--counter']}>
           <Counter
-            onBlue={e => getInputValue(e, itemData)}
+            onBlue={getInputValue}
-            defaultNum={formatCount(itemData)}
+            defaultNum={count}
+            onChange={handleCountChange}
             step={itemData.step}
             digits={itemData.digits}
-            onClickBtn={e => getInputValue(e, itemData)}
+            onClickBtn={getInputValue}
             unit={formatUnit(itemData)}
             minNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.min_num : formatMeterDiv(itemData.min_num)}
             maxNum={itemData.sale_mode == EnumSaleMode.Bulk ? itemData.max_num : formatMeterDiv(itemData.max_num)}
@@ -153,11 +165,11 @@ const withStateSlice = (comp, slice) => {
   return memo(forwardRef(Wrapper))
 }
 
-ColorKindItem = withStateSlice(ColorKindItem, (state: ShoppingStateContextValue, props: PropsType) => {
+const ColorKindItemWithStateSlice = withStateSlice(ColorKindItem, (state: ShoppingStateContextValue, props: PropsType) => {
   return {
     multipleSelection: state.colorStore[props.purchaserId]['multipleSelection'],
     Observer: state.Observer,
   }
 })
 
-export default ColorKindItem
+export default ColorKindItemWithStateSlice

src/pages/shopping/components/shoppingCartItem/index.tsx

@@ -60,7 +60,7 @@ type PropsType = {
   }
 }
 
-let ShoppingCartItem: FC<PropsType> = props => {
+const ShoppingCartItem: FC<PropsType> = props => {
   const { state } = props
   console.log('props ShoppingCartItem', props)
 
@@ -303,7 +303,7 @@ const GoodsList = memo<GoodsListPropType>(props => {
       itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
         itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
           console.log('item===>', item)
-          return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
+          return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item}></ColorKindItem>
         })
       ) : (
         <View className={styles.noList}>暂无数据</View>
@@ -376,7 +376,7 @@ const withStateSlice = (comp, slice) => {
     if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) {
       needMemo = false
     }
-    if(prevProps.itemData.purchaser_name === '牛逼哄哄纺织'){
+    if(prevProps.itemData.purchaser_name === 'Hhjh'){
       console.log('------withStateSlice props-------');
       console.log('withStateSlice props prevProps', prevProps);
       console.log('withStateSlice props nextProps', nextProps);
@@ -399,10 +399,10 @@ const withStateSlice = (comp, slice) => {
   return memo(forwardRef(Wrapper))
 }
 
-ShoppingCartItem = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
+const ShoppingCartItemWithStateSlice = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
   multipleSelection: state.colorStore?.[props.itemData?.purchaser_id]?.['multipleSelection'],
   currentCheckedPurchaserId: state.currentCheckedPurchaserId,
   Observer: state.Observer,
 }))
 
-export default ShoppingCartItem
+export default ShoppingCartItemWithStateSlice

src/pages/shopping/index.tsx

@@ -74,6 +74,8 @@ const ShoppingCartContainer: FC = () => {
   useDidShow(() => {
     // 第二次进入该页面时触发
     if (!isFirst.current) {
+      // 重新刷新
+      // setShoppingCartData({ list: [], total: 0 })
       fetchData(getFilterData(searchOptions))
     }
   })
@@ -147,9 +149,8 @@ const ShoppingCartContainer: FC = () => {
 
   useEffect(() => {
     if (state.success) {
-      // startTransition(() => {
+      console.log('fetch success', state);
       setShoppingCartData({ list: state.data.list, total: state.data.total })
-      // })
     }
   }, [state])
 

src/use/useCommon.ts

@@ -182,7 +182,7 @@ export function useCustomTabItemTap(callback) {
   const { selectedId, tabItem } = useSelector(state => {
     return state.tabBarData
   })
-  const targetPagePayload = tabItem.find(item => item.id === selectedId)
+  const targetPagePayload = tabItem?.find(item => item.id === selectedId)
   callback({
     index: targetPagePayload?.id,
     pagePath: targetPagePayload?.pagePath,