diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 44a9481..393d0db 100644 --- a/src/pages/shopping/index.tsx +++ b/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 React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' +import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro' +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 { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index' -import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context' -import { alert, goLink } from '@/common/common' +import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' +import { ShoppingCart } from './components/shoppingCart/index' +import { Goods, useShoppingContext } from './context' +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 = () => { + + let isFirst = useRef(true) + const { isManageStatus, setManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore, setColorStore } = useShoppingContext() // 管理 @@ -55,16 +57,30 @@ const ShoppingCartContainer: FC = () => { 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 = () => { // 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 = () => { 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 = () => { - - + + {!!shoppingCartData?.list?.length && shoppingCartData?.list?.map((item, index) => { return