🐞 fix(ID1000604): 购物页面

新增其他页面跳转回购物页面后自动刷新

src/pages/shopping/index.tsx

@@ -1,21 +1,20 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
-import Taro, { useDidShow } from '@tarojs/taro'
+import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro'
-import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
 import InfiniteScroll from '@/components/infiniteScroll'
 import ItemList from './components/shoppingCartItem/index'
-import BottomBtns from '@/components/BottomBtns'
 import { formatPriceDiv } from '@/common/format'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
-import { dataLoadingStatus, debounce } from '@/common/util'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
-import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
+import { ShoppingCart } from './components/shoppingCart/index'
-import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context'
+import { Goods, useShoppingContext } from './context'
-import { alert, goLink } from '@/common/common'
+import { alert, goLink, isEmptyObject } from '@/common/common'
 
 export const Shopping: FC = memo(() => {
   // 计算总的预估金额
@@ -48,6 +47,9 @@ export const Shopping: FC = memo(() => {
 interface InternalContainer {}
 
 const ShoppingCartContainer: FC<InternalContainer> = () => {
+
+  let isFirst = useRef(true)
+
   const { isManageStatus, setManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore, setColorStore } = useShoppingContext()
 
   // 管理
@@ -55,16 +57,30 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     setManageStatus(!isManageStatus)
   }
 
-  const [listHeight, setListHeight] = useState('auto')
+  const listHeightRef = useRef('auto')
 
   const { fetchData, state } = ShoppingCartListApi()
 
   const [searchOptions, setSearchOptions] = useState({
     short_name_or_phone: '',
   })
+  useDidShow(()=>{
+    console.log('onShow');
+    if (!isFirst.current){
+
+      fetchData(searchOptions)
+    } 
+  })
+  useDidHide(() => {
+    console.log('onHide');
+  })
+  console.log('rerender');
 
   useEffect(() => {
-    fetchData(searchOptions)
+    console.log('useEffect fetchData')
+    if (!isEmptyObject(getFilterData(searchOptions))){
+      fetchData(searchOptions)
+    } 
   }, [searchOptions])
 
   // 输入了搜索关键字
@@ -82,7 +98,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
   useLayoutEffect(() => {
     ;(async () => {
+      console.log('useLayoutEffect')
       await fetchData()
+      isFirst.current = false
       let query = Taro.createSelectorQuery()
       console.log('query', query)
       query.select('#shoppingContainer').boundingClientRect()
@@ -94,7 +112,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         const topBarHeight = res[1].height
         const bottomBarHeight = res[2].height
         const listHeight = containerHeight - topBarHeight - bottomBarHeight
-        setListHeight(listHeight + 'px')
+        listHeightRef.current = listHeight + 'px'
       })
     })()
   }, [])
@@ -191,12 +209,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         </Search>
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
-        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
+        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
-          <InfiniteScroll
+          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            statusMore={statusMore}
-            refresherEnabled={true}
-            selfOnRefresherRefresh={handleRefresh}
-            refresherTriggered={refreshStatus}>
             {!!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>