fix(shop): 购物车页面进入不刷新问题
- 购物车页面添加 useDidShow 钩子,页面显示时自动刷新购物车数据 - 商品列表页和分类页改用 CartContext 的 addItem 方法添加商品 - 移除直接调用 addToCart API,避免购物车状态不同步 - 解决从商品列表页或分类页加入购物车后进入购物车页面商品不显示的问题
This commit is contained in:
@@ -147,7 +147,19 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop
|
||||
3. `useEffect` 中增加 `if (!user?.userId) return` 判断,已登录但 userId 还没拿到时等待下次渲染
|
||||
4. `useEffect` 依赖数组加 `user?.userId`,userId 变化时重新触发加载
|
||||
|
||||
## 首页铃铛接入新订单轮询(2026-07-14)
|
||||
## 购物车页面进入不刷新 Bug 修复(2026-07-14)
|
||||
|
||||
### 问题
|
||||
从商品列表页/分类页加入购物车后,进入购物车页面,新加的商品不显示,只有之前已在购物车里的商品。
|
||||
|
||||
### 根因
|
||||
1. **购物车页面缺少 `useDidShow`**:`cart.tsx` 仅在 `useEffect([isLoggedIn])` 中调用 `refresh()`,登录状态不变时不会重新拉取数据。从其他页面返回购物车时,页面不刷新。
|
||||
2. **商品列表页/分类页直接调 API 加购**:`shop/index.tsx` 和 `shop/category.tsx` 直接调用 `addToCart` API,未通过 `CartContext.addItem`,导致 CartContext 状态不同步(`addItem` 内部会调 `refresh()`)。
|
||||
|
||||
### 修改
|
||||
1. **`src/pages/shop/cart.tsx`**:导入 `useDidShow`,添加 `useDidShow(() => { if (isLoggedIn) refresh() })`,页面每次显示时从服务端拉取最新购物车数据
|
||||
2. **`src/pages/shop/index.tsx`**:导入 `useCartContext`,`handleAddToCart` 改用 `addItem(product, undefined, product.step || 1)` 代替直接调 `addToCart` API;移除 `addToCart` 导入
|
||||
3. **`src/pages/shop/category.tsx`**:同上,改用 `useCartContext` 的 `addItem`
|
||||
|
||||
### 需求
|
||||
首页顶部搜索栏右侧铃铛图标,门店店员有新订单时能收到提醒。
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useCartContext } from '@/contexts/CartContext'
|
||||
import { useUserContext } from '@/contexts/UserContext'
|
||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
||||
@@ -30,6 +30,13 @@ const CartPage: React.FC = () => {
|
||||
}
|
||||
}, [isLoggedIn])
|
||||
|
||||
// 页面再次显示时刷新购物车数据(从其他页面加购后回到购物车)
|
||||
useDidShow(() => {
|
||||
if (isLoggedIn) {
|
||||
refresh()
|
||||
}
|
||||
})
|
||||
|
||||
const fetchRecommendGoods = async (page?: number) => {
|
||||
const targetPage = page || recommendPage
|
||||
try {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { listShopGoodsCategory } from '@/api/shop/shopGoodsCategory'
|
||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
||||
import { addToCart } from '@/api/shop/shopCart'
|
||||
import { useCartContext } from '@/contexts/CartContext'
|
||||
import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
|
||||
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
|
||||
import { isGuest } from '@/utils/auth'
|
||||
@@ -28,6 +28,7 @@ const SORT_TABS: { key: SortKey; label: string }[] = [
|
||||
]
|
||||
|
||||
const CategoryPage: React.FC = () => {
|
||||
const { addItem } = useCartContext()
|
||||
const [categories, setCategories] = useState<ShopGoodsCategory[]>([])
|
||||
const [activeId, setActiveId] = useState<number | undefined>()
|
||||
|
||||
@@ -133,14 +134,7 @@ const CategoryPage: React.FC = () => {
|
||||
const handleAddToCart = (e: any, product: ShopGoods) => {
|
||||
e.stopPropagation()
|
||||
if (!requireLogin({ action: 'addToCart' })) return
|
||||
addToCart({
|
||||
goodsId: product.goodsId!,
|
||||
cartNum: product.step || 1,
|
||||
}).then(() => {
|
||||
Taro.showToast({ title: '已加入购物车', icon: 'success' })
|
||||
}).catch(err => {
|
||||
Taro.showToast({ title: err.message || '添加失败', icon: 'none' })
|
||||
})
|
||||
addItem(product, undefined, product.step || 1).catch(() => {})
|
||||
}
|
||||
|
||||
/** 跳转商品详情 */
|
||||
|
||||
@@ -3,7 +3,7 @@ import { View, Text, ScrollView, Image, Input } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { listShopGoodsCategory } from '@/api/shop/shopGoodsCategory'
|
||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
||||
import { addToCart } from '@/api/shop/shopCart'
|
||||
import { useCartContext } from '@/contexts/CartContext'
|
||||
import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
|
||||
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
|
||||
import { isGuest } from '@/utils/auth'
|
||||
@@ -36,6 +36,7 @@ const SORT_TABS: { key: SortKey; label: string }[] = [
|
||||
]
|
||||
|
||||
const ShopPage: React.FC = () => {
|
||||
const { addItem } = useCartContext()
|
||||
const [categoryList, setCategoryList] = useState<any[]>(PRESET_CATEGORIES)
|
||||
const [activeCategory, setActiveCategory] = useState(0)
|
||||
|
||||
@@ -146,14 +147,7 @@ const ShopPage: React.FC = () => {
|
||||
const handleAddToCart = (e: any, product: ShopGoods) => {
|
||||
e.stopPropagation()
|
||||
if (!requireLogin({ action: 'addToCart' })) return
|
||||
addToCart({
|
||||
goodsId: product.goodsId!,
|
||||
cartNum: product.step || 1,
|
||||
}).then(() => {
|
||||
Taro.showToast({ title: '已加入购物车', icon: 'success' })
|
||||
}).catch(err => {
|
||||
Taro.showToast({ title: err.message || '添加失败', icon: 'none' })
|
||||
})
|
||||
addItem(product, undefined, product.step || 1).catch(() => {})
|
||||
}
|
||||
|
||||
/** 搜索输入(防抖 500ms) */
|
||||
|
||||
Reference in New Issue
Block a user