fix(violation):优化列表加载逻辑和防重处理
- 修改 needRefresh 默认值为 false,避免初始加载重复 - 添加 isLoadingRef 状态防止并发请求 - 在 reload 方法中加入并发请求检查- 确保数据替换而非追加 - 调整 useDidShow 和 useEffect 逻辑以优化刷新机制 - 分页变化时才触发重新加载- 使用唯一 ID作为列表项 key 提升渲染性能 - 缩短提交成功后的返回延迟时间 - 地图标记增加标签显示违规编码信息
This commit is contained in:
@@ -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'
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
: []
|
: []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 ? '更新失败' : '提交失败',
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user