162 lines
4.5 KiB
Markdown
162 lines
4.5 KiB
Markdown
# 报备成功后列表刷新问题修复说明
|
|
|
|
## 问题描述
|
|
用户在客户报备页面成功提交报备信息后，返回到客户列表页面时，列表没有自动更新显示最新的数据，需要手动刷新才能看到新增的客户信息。
|
|
|
|
## 问题分析
|
|
|
|
### 根本原因
|
|
在 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. **易于维护**：代码清晰，逻辑简单
|
|
|
|
现在用户在完成客户报备后，返回列表页面时会自动看到最新的数据，大大提升了应用的用户体验。
|