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

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

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 { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
+const ColorKindItem: FC<PropsType> = 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 formatCount = itemData => {
-    return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : formatMeterDiv(itemData.length)
+  const handleCountChange = (nextValue: number) => {
+    setCount(nextValue)
   }
 
+  
+
   //格式化单位
   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)}
-            defaultNum={formatCount(itemData)}
+            onBlue={getInputValue}
+            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])