diff --git a/src/hjm/violation/list.tsx b/src/hjm/violation/list.tsx index 80df647..81c6ecc 100644 --- a/src/hjm/violation/list.tsx +++ b/src/hjm/violation/list.tsx @@ -27,8 +27,8 @@ const List: React.FC = () => { const [page, setPage] = useState(1) const [limit, setLimit] = useState(10) const [total, setTotal] = useState(0) - const [needRefresh, setNeedRefresh] = useState(false) // 修改默认值为false,避免初始加载时的重复 - const [isLoadingRef, setIsLoadingRef] = useState(false) // 防止并发加载 + const [needRefresh, setNeedRefresh] = useState(true) + const isReloadingRef = React.useRef(false) // 使用useRef防止并发请求 console.log(refreshing) // 获取状态显示 @@ -46,22 +46,26 @@ const List: React.FC = () => { } const reload = async (showLoading = true) => { - // 防止并发请求,如果正在加载则直接返回 - if (isLoadingRef) { - console.log('正在加载中,跳过本次请求') + // 防止并发请求,使用ref而不state避免重渲染 + if (isReloadingRef.current) { + console.log('[防重复] 正在加载中,跳过本次请求') return } - setLimit(10) + isReloadingRef.current = true + console.log('[开始加载] showLoading:', showLoading, 'page:', page, 'limit:', limit) + + // 不要在这里设置limit,避免触发useEffect + // setLimit(10) // 删除这行! + try { - setIsLoadingRef(true) // 设置加载标记 if (showLoading) setLoading(true) setRefreshing(true) const where: any = { keywords: keywords.trim(), page, - limit, + limit: 10, // 直接使用10,不通过state } const roleCode = Taro.getStorageSync('RoleCode'); @@ -77,16 +81,14 @@ const List: React.FC = () => { if(params.id){ where.code = params.id; } - - console.log('开始请求数据, where:', where) + const res = await pageHjmViolation(where) - console.log('请求成功,获取到', res?.list?.length, '条数据') + console.log('[请求成功] 获取到', res?.list?.length, '条数据') - // 确保数据被替换而不是追加 setList(res?.list || []) setTotal(res?.count || 0) } catch (error) { - console.error('获取报险记录失败:', error) + console.error('[请求失败]', error) Taro.showToast({ title: '获取报险记录失败', icon: 'error' @@ -94,7 +96,8 @@ const List: React.FC = () => { } finally { setLoading(false) setRefreshing(false) - setIsLoadingRef(false) // 清除加载标记 + isReloadingRef.current = false + console.log('[加载结束]') } } @@ -114,41 +117,55 @@ const List: React.FC = () => { // 页面显示时触发,包括从其他页面返回 useDidShow(() => { - console.log('useDidShow 触发, needRefresh:', needRefresh) + console.log('[生命周期] useDidShow 触发, needRefresh:', needRefresh) if (needRefresh) { - console.log('执行 reload 由于 needRefresh=true') - reload(false) + console.log('[生命周期] 执行reload 由于 needRefresh=true') + // 先设置false,再调用reload,防止多次触发 setNeedRefresh(false) + reload(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依赖,避免不必要的重新加载 - // 单独处理分页变化 + // 初始化effect - 只执行一次 useEffect(() => { - if (page > 1 || limit !== 10) { // 只有当分页参数真正改变时才重新加载 - console.log('分页参数变化,执行 reload, page:', page, 'limit:', limit) - reload().then() + console.log('[生命周期] 组件初始化') + + // 监听刷新事件 + const handleRefresh = () => { + console.log('[事件] 接收到 violationListRefresh 事件') + setNeedRefresh(true) } - }, [page, limit]) + + Taro.eventCenter.on('violationListRefresh', handleRefresh) + + // 初始加载数据 + console.log('[生命周期] 执行初始加载') + reload().then() + + // 清理事件监听器 + return () => { + console.log('[生命周期] 组件卸载,清理事件监听') + Taro.eventCenter.off('violationListRefresh', handleRefresh) + } + }, []) // 空依赖,只执行一次 + + // 分页变化effect - 单独处理 + useEffect(() => { + // 跳过初始值,只在真正变化时才加载 + if (page !== 1) { + console.log('[分页变化] page变为', page, ',执行reload') + reload() + } + }, [page]) + + useEffect(() => { + // limit变化时重置到第一页 + if (limit !== 10) { + console.log('[分页变化] limit变为', limit, ',重置到第一页') + setPage(1) + reload() + } + }, [limit]) const onPageChange = (current: number) => { setPage(current) @@ -223,7 +240,7 @@ const List: React.FC = () => { return (