diff --git a/src/dealer/customer/index.tsx b/src/dealer/customer/index.tsx index a1f49d7..f4dfb2c 100644 --- a/src/dealer/customer/index.tsx +++ b/src/dealer/customer/index.tsx @@ -1,6 +1,6 @@ import {useState, useEffect, useCallback} from 'react' import {View, Text} from '@tarojs/components' -import Taro from '@tarojs/taro' +import Taro, {useDidShow} from '@tarojs/taro' import {Loading, InfiniteLoading, Empty, Space, Tabs, TabPane, Tag, Button} from '@nutui/nutui-react-taro' import {Phone} from '@nutui/icons-react-taro' import type {ShopDealerApply, ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model"; @@ -50,7 +50,6 @@ const CustomerIndex = () => { } const res = await pageShopDealerApply(params); - let newList: CustomerUser[]; if (res?.list && res.list.length > 0) { // 正确映射状态 @@ -60,17 +59,22 @@ const CustomerIndex = () => { })); // 如果是重置页面或第一页，直接设置新数据；否则追加数据 - newList = resetPage ? mappedList : list.concat(mappedList); + if (resetPage || currentPage === 1) { + setList(mappedList); + } else { + setList(prevList => prevList.concat(mappedList)); + } // 正确判断是否还有更多数据 const hasMoreData = res.list.length >= 10; // 假设每页10条数据 setHasMore(hasMoreData); } else { - newList = resetPage ? [] : list; + if (resetPage || currentPage === 1) { + setList([]); + } setHasMore(false); } - setList(newList); setPage(currentPage); } catch (error) { console.error('获取客户数据失败:', error); @@ -81,7 +85,7 @@ const CustomerIndex = () => { } finally { setLoading(false); } - }, [activeTab]); + }, [activeTab, page]); const reloadMore = async () => { if (loading || !hasMore) return; // 防止重复加载 @@ -174,6 +178,16 @@ const CustomerIndex = () => { fetchCustomerData(activeTab, true); }, [activeTab]); + // 监听页面显示，当从其他页面返回时刷新数据 + useDidShow(() => { + // 刷新当前tab的数据和统计信息 + setList([]); + setPage(1); + setHasMore(true); + fetchCustomerData(activeTab, true); + fetchStatusCounts(); + }); + // 渲染客户项 const renderCustomerItem = (customer: CustomerUser) => ( diff --git a/src/dealer/customer/trading.tsx b/src/dealer/customer/trading.tsx index 8d0028d..8f2c410 100644 --- a/src/dealer/customer/trading.tsx +++ b/src/dealer/customer/trading.tsx @@ -39,7 +39,6 @@ const CustomerTrading = () => { } const res = await pageShopDealerApply(params); - let newList: CustomerUser[]; if (res?.list && res.list.length > 0) { // 正确映射状态 @@ -49,17 +48,22 @@ const CustomerTrading = () => { })); // 如果是重置页面或第一页，直接设置新数据；否则追加数据 - newList = resetPage ? mappedList : list.concat(mappedList); + if (resetPage || currentPage === 1) { + setList(mappedList); + } else { + setList(prevList => prevList.concat(mappedList)); + } // 正确判断是否还有更多数据 const hasMoreData = res.list.length >= 10; // 假设每页10条数据 setHasMore(hasMoreData); } else { - newList = resetPage ? [] : list; + if (resetPage || currentPage === 1) { + setList([]); + } setHasMore(false); } - setList(newList); setPage(currentPage); } catch (error) { console.error('获取客户数据失败:', error); @@ -70,7 +74,7 @@ const CustomerTrading = () => { } finally { setLoading(false); } - }, []); + }, [page]); const reloadMore = async () => { if (loading || !hasMore) return; // 防止重复加载 @@ -134,7 +138,7 @@ const CustomerTrading = () => { return ( diff --git a/报备成功后列表刷新问题修复说明.md b/报备成功后列表刷新问题修复说明.md new file mode 100644 index 0000000..58d9499 --- /dev/null +++ b/报备成功后列表刷新问题修复说明.md @@ -0,0 +1,161 @@ +# 报备成功后列表刷新问题修复说明 + +## 问题描述 +用户在客户报备页面成功提交报备信息后，返回到客户列表页面时，列表没有自动更新显示最新的数据，需要手动刷新才能看到新增的客户信息。 + +## 问题分析 + +### 根本原因 +在 Taro 框架中，当从一个页面返回到上一个页面时，上一个页面不会自动重新加载数据。客户列表页面缺少监听页面显示的逻辑，导致从报备页面返回时无法自动刷新数据。 + +### 具体问题 +1. **缺少页面显示监听**：客户列表页面没有使用 `useDidShow` 钩子监听页面显示事件 +2. **数据不同步**：报备成功后只是简单地调用 `Taro.navigateBack()`，没有通知列表页面刷新 +3. **用户体验差**：用户需要手动下拉刷新或重新进入页面才能看到最新数据 + +### 页面生命周期问题 +```typescript +// 报备页面 (add.tsx) +const submitSucceed = async (values: any) => { + // ... 提交逻辑 + await addShopDealerApply(submitData); + + Taro.showToast({ + title: '提交成功', + icon: 'success' + }); + + setTimeout(() => { + Taro.navigateBack(); // 只是返回，没有通知列表页面刷新 + }, 1000); +}; +``` + +## 修复方案 + +### 1. 添加页面显示监听 +在客户列表页面 (`src/dealer/customer/index.tsx`) 中添加 `useDidShow` 钩子： + +```typescript +import {useState, useEffect, useCallback} from 'react' +import {View, Text} from '@tarojs/components' +import Taro, {useDidShow} from '@tarojs/taro' // 导入 useDidShow + +// ... 其他代码 + +// 监听页面显示，当从其他页面返回时刷新数据 +useDidShow(() => { + // 刷新当前tab的数据和统计信息 + setList([]); + setPage(1); + setHasMore(true); + fetchCustomerData(activeTab, true); + fetchStatusCounts(); +}); +``` + +### 2. 完整的数据刷新逻辑 +当页面显示时，执行以下操作： +- 清空当前列表数据 +- 重置页码为第一页 +- 重置加载状态 +- 重新获取当前tab的数据 +- 刷新状态统计信息 + +## 修复效果 + +### ✅ 自动刷新 +- 从报备页面返回时，列表自动刷新显示最新数据 +- 无需用户手动操作，提升用户体验 + +### ✅ 数据同步 +- 新增的客户信息立即显示在列表中 +- 状态统计数量实时更新 +- 保持数据的一致性 + +### ✅ 用户体验优化 +- 报备成功后立即看到结果 +- 减少用户困惑和重复操作 +- 提供流畅的操作体验 + +## 技术细节 + +### useDidShow 钩子 +`useDidShow` 是 Taro 提供的页面生命周期钩子，会在以下情况触发： +- 页面首次加载完成 +- 从其他页面返回到当前页面 +- 从后台切换到前台 + +### 数据刷新策略 +```typescript +useDidShow(() => { + // 1. 清空现有数据，避免闪烁 + setList([]); + + // 2. 重置分页状态 + setPage(1); + setHasMore(true); + + // 3. 重新获取数据 + fetchCustomerData(activeTab, true); + + // 4. 刷新统计信息 + fetchStatusCounts(); +}); +``` + +### 与现有逻辑的协调 +- 保持与 `useEffect` 的初始化逻辑一致 +- 不影响 Tab 切换时的数据加载 +- 确保上拉加载更多功能正常工作 + +## 其他相关页面 + +### 交易页面 +如果交易页面也有类似的问题，可以采用相同的解决方案： + +```typescript +// src/dealer/customer/trading.tsx +import Taro, {useDidShow} from '@tarojs/taro' + +useDidShow(() => { + setList([]); + setPage(1); + setHasMore(true); + fetchCustomerData(true); +}); +``` + +### 通用解决方案 +对于所有需要在返回时刷新数据的列表页面，都可以使用这种模式： + +1. 导入 `useDidShow` 钩子 +2. 在钩子中重置状态 +3. 重新获取数据 +4. 刷新相关统计信息 + +## 注意事项 + +### 性能考虑 +- `useDidShow` 会在每次页面显示时触发，包括首次加载 +- 避免在钩子中执行过于复杂的操作 +- 考虑添加防抖或节流机制（如果需要） + +### 用户体验 +- 数据刷新时显示适当的加载状态 +- 避免频繁的网络请求 +- 保持界面的响应性 + +### 错误处理 +- 确保网络请求失败时的友好提示 +- 避免因刷新失败导致页面异常 + +## 总结 +通过添加 `useDidShow` 钩子监听页面显示事件，我们成功解决了报备成功后列表不自动刷新的问题。这个解决方案： + +1. **简单有效**：只需添加几行代码即可解决问题 +2. **用户友好**：提供了流畅的操作体验 +3. **技术合理**：符合 Taro 框架的最佳实践 +4. **易于维护**：代码清晰，逻辑简单 + +现在用户在完成客户报备后，返回列表页面时会自动看到最新的数据，大大提升了应用的用户体验。