fix(order): 修复订单列表页下单后不自动刷新的问题

- 新增 Taro.useDidShow 钩子处理 tabBar 页面显示时的刷新
- 使用 isFirstShow 跳过首次显示,防止重复加载
- 切换 tab 时重置所有 tab 的 initialized 状态
- 下单后立即刷新当前 tab 订单列表,确保显示最新数据
- 解决 switchTab 不重新挂载导致订单数据不刷新的根因
This commit is contained in:
2026-07-14 19:15:27 +08:00
parent df4305edf1
commit b60e5c976a
2 changed files with 31 additions and 0 deletions

View File

@@ -220,6 +220,20 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop
- 顺手把配送区域 `goodsWeight` 的同类写法也改成 `{Number(product.goodsWeight) > 0 && (...)}`,防止重量为 0 时同样泄漏。
- 另按用户要求「是 0 就不显示」,把销量行也改为 `{Number(product.sales) > 0 && (...)}`,销量为 0 时整条「销量: 0」不渲染。
## 订单列表页下单后不自动刷新修复2026-07-14
### 问题
`pages/order/list` 下单后从 checkout 页 `Taro.switchTab` 跳过来,订单列表不刷新,看不到新订单。
### 根因
订单列表页是 tabBar 页,`switchTab` 不会重新挂载组件。`useEffect` 依赖 `[tabIndex, isLoggedIn, user?.userId]`,这些值不变就不会重新触发;且 effect 内有 `if (!tabStates[tabIndex].initialized)` 守卫,页面已初始化过就直接跳过。
### 修改
- **`src/pages/order/list.tsx`**:新增 `Taro.useDidShow` 生命周期钩子
-`isFirstShow` ref 跳过首次显示(由 `useEffect` 处理初始加载)
- 后续每次显示时:标记所有 tab 为 `initialized: false`(切 tab 时会重新加载),并立即 `loadOrders(tabIndex, 1)` 刷新当前 tab
- 与之前购物车页 `useDidShow` 刷新是同一模式
## 商品详情页底部购物车角标2026-07-14
### 需求

View File

@@ -124,6 +124,23 @@ const OrderListPage: React.FC = () => {
}
}, [tabIndex, isLoggedIn, user?.userId])
// 页面每次显示时刷新数据tabBar 页 switchTab 不会重新挂载组件)
const isFirstShow = useRef(true)
Taro.useDidShow(() => {
// 首次显示由 useEffect 处理,跳过
if (isFirstShow.current) {
isFirstShow.current = false
return
}
const userId = userIdRef.current
if (!userId) return
// 标记所有 tab 为未初始化,切换时会重新加载
setTabStates(prev => prev.map(s => ({ ...s, initialized: false })))
// 立即刷新当前 tab
loadOrders(tabIndex, 1)
})
const handleLoadMore = () => {
if (!currentState.finished && !currentState.loading) {
loadOrders(tabIndex, currentState.page + 1)