fix(violation):优化列表加载逻辑和防重处理

- 修改 needRefresh 默认值为 false,避免初始加载重复
- 添加 isLoadingRef 状态防止并发请求
- 在 reload 方法中加入并发请求检查- 确保数据替换而非追加
- 调整 useDidShow 和 useEffect 逻辑以优化刷新机制
- 分页变化时才触发重新加载- 使用唯一 ID作为列表项 key 提升渲染性能
- 缩短提交成功后的返回延迟时间
- 地图标记增加标签显示违规编码信息
This commit is contained in:
2025-10-28 10:20:39 +08:00
parent cfcc775c4f
commit 954c4ac296
3 changed files with 65 additions and 26 deletions

View File

@@ -339,12 +339,25 @@ const Location = () => {
markers={
latitude && longitude &&
!isNaN(latitude) && !isNaN(longitude) &&
isFinite(latitude) && isFinite(longitude)
isFinite(latitude) && isFinite(longitude) && item
? [{
id: 1,
latitude: latitude,
longitude: longitude,
iconPath: ''
iconPath: '',
label: {
content: item.code || '',
color: '#ffffff',
fontSize: 14,
bgColor: '#1989fa',
borderRadius: 5,
padding: 5,
textAlign: 'center',
anchorX: 0,
anchorY: 0,
borderWidth: 1,
borderColor: '#1989fa'
}
}]
: []
}

View File

@@ -149,8 +149,8 @@ function Add() {
}
setTimeout(() => {
Taro.navigateBack()
}, 2000)
return Taro.navigateBack()
}, 1000)
} catch (error) {
Taro.showToast({
title: isEditMode ? '更新失败' : '提交失败',

View File

@@ -27,7 +27,8 @@ const List: React.FC = () => {
const [page, setPage] = useState<number>(1)
const [limit, setLimit] = useState<number>(10)
const [total, setTotal] = useState<number>(0)
const [needRefresh, setNeedRefresh] = useState<boolean>(true)
const [needRefresh, setNeedRefresh] = useState<boolean>(false) // 修改默认值为false避免初始加载时的重复
const [isLoadingRef, setIsLoadingRef] = useState<boolean>(false) // 防止并发加载
console.log(refreshing)
// 获取状态显示
@@ -45,8 +46,15 @@ const List: React.FC = () => {
}
const reload = async (showLoading = true) => {
// 防止并发请求,如果正在加载则直接返回
if (isLoadingRef) {
console.log('正在加载中,跳过本次请求')
return
}
setLimit(10)
try {
setIsLoadingRef(true) // 设置加载标记
if (showLoading) setLoading(true)
setRefreshing(true)
@@ -69,8 +77,12 @@ const List: React.FC = () => {
if(params.id){
where.code = params.id;
}
const res = await pageHjmViolation(where)
console.log('开始请求数据, where:', where)
const res = await pageHjmViolation(where)
console.log('请求成功,获取到', res?.list?.length, '条数据')
// 确保数据被替换而不是追加
setList(res?.list || [])
setTotal(res?.count || 0)
} catch (error) {
@@ -82,6 +94,7 @@ const List: React.FC = () => {
} finally {
setLoading(false)
setRefreshing(false)
setIsLoadingRef(false) // 清除加载标记
}
}
@@ -101,28 +114,41 @@ const List: React.FC = () => {
// 页面显示时触发,包括从其他页面返回
useDidShow(() => {
console.log('useDidShow 触发, needRefresh:', needRefresh)
if (needRefresh) {
reload(false);
setNeedRefresh(false);
console.log('执行 reload 由于 needRefresh=true')
reload(false)
setNeedRefresh(false)
}
});
})
//
// useEffect(() => {
// // 监听刷新事件
// const handleRefresh = () => {
// console.log('接收到 violationListRefresh 事件')
// // 只设置标记不直接调用reload由useDidShow处理
// setNeedRefresh(true)
// }
//
// Taro.eventCenter.on('violationListRefresh', handleRefresh)
//
// // 初始加载数据 - 只在组件首次挂载时执行
// console.log('组件初始化,执行初始 reload')
// reload().then()
//
// // 清理事件监听器
// return () => {
// Taro.eventCenter.off('violationListRefresh', handleRefresh)
// }
// }, []) // 移除page和limit依赖避免不必要的重新加载
// 单独处理分页变化
useEffect(() => {
// 监听刷新事件
const handleRefresh = () => {
setNeedRefresh(true);
};
Taro.eventCenter.on('violationListRefresh', handleRefresh);
// 初始加载数据
reload().then();
// 清理事件监听器
return () => {
Taro.eventCenter.off('violationListRefresh', handleRefresh);
};
}, [page, limit]);
if (page > 1 || limit !== 10) { // 只有当分页参数真正改变时才重新加载
console.log('分页参数变化,执行 reload, page:', page, 'limit:', limit)
reload().then()
}
}, [page, limit])
const onPageChange = (current: number) => {
setPage(current)
@@ -192,12 +218,12 @@ const List: React.FC = () => {
</Empty>
) : (
<div style={{padding: '0 16px'}}>
{list.map((item, index) => {
{list.map((item) => {
const statusDisplay = getStatusDisplay(item.status)
return (
<div
key={index}
key={item.id || item.code} // 使用唯一ID而不是index
style={{
backgroundColor: '#fff',
borderRadius: '12px',