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={ markers={
latitude && longitude && latitude && longitude &&
!isNaN(latitude) && !isNaN(longitude) && !isNaN(latitude) && !isNaN(longitude) &&
isFinite(latitude) && isFinite(longitude) isFinite(latitude) && isFinite(longitude) && item
? [{ ? [{
id: 1, id: 1,
latitude: latitude, latitude: latitude,
longitude: longitude, 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(() => { setTimeout(() => {
Taro.navigateBack() return Taro.navigateBack()
}, 2000) }, 1000)
} catch (error) { } catch (error) {
Taro.showToast({ Taro.showToast({
title: isEditMode ? '更新失败' : '提交失败', title: isEditMode ? '更新失败' : '提交失败',

View File

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