// 测试筛选逻辑修复
|
// 验证后端筛选 vs 前端筛选的差异
|
|
console.log('=== 筛选逻辑修复测试 ===\n')
|
|
// 模拟后端返回的原始数据
|
const mockBackendData = [
|
{ id: 1, name: '活动A', state: 1, stateName: '即将开始' },
|
{ id: 2, name: '活动B', state: 2, stateName: '进行中' },
|
{ id: 3, name: '活动C', state: 1, stateName: '即将开始' },
|
{ id: 4, name: '活动D', state: 3, stateName: '已结束' },
|
{ id: 5, name: '活动E', state: 2, stateName: '进行中' },
|
{ id: 6, name: '活动F', state: 1, stateName: '即将开始' },
|
{ id: 7, name: '活动G', state: 3, stateName: '已结束' },
|
{ id: 8, name: '活动H', state: 2, stateName: '进行中' },
|
{ id: 9, name: '活动I', state: 1, stateName: '即将开始' },
|
{ id: 10, name: '活动J', state: 3, stateName: '已结束' }
|
]
|
|
console.log('原始数据（10条）:')
|
mockBackendData.forEach((item, index) => {
|
console.log(` 索引${index}: ID=${item.id}, 名称=${item.name}, 状态=${item.stateName}`)
|
})
|
|
console.log('\n--- 前端筛选方式（有问题的方式） ---')
|
|
function frontendFilter(data, filterStatus) {
|
// 模拟前端筛选逻辑
|
const stateMapping = {
|
'upcoming': 1,
|
'ongoing': 2,
|
'ended': 3
|
}
|
|
if (filterStatus === 'all') {
|
return data
|
}
|
|
return data.filter(activity => activity.state === stateMapping[filterStatus])
|
}
|
|
const frontendFiltered = frontendFilter(mockBackendData, 'ongoing')
|
console.log(`筛选"进行中"的活动（前端筛选）:`)
|
frontendFiltered.forEach((item, index) => {
|
console.log(` 模板索引${index}: ID=${item.id}, 名称=${item.name} ← 索引与ID不匹配！`)
|
})
|
|
console.log('\n--- 后端筛选方式（修复后的方式） ---')
|
|
function backendFilter(data, state) {
|
// 模拟后端筛选逻辑
|
if (state === null) {
|
return data
|
}
|
|
return data.filter(activity => activity.state === state)
|
}
|
|
const backendFiltered = backendFilter(mockBackendData, 2) // state=2 表示进行中
|
console.log(`筛选"进行中"的活动（后端筛选）:`)
|
backendFiltered.forEach((item, index) => {
|
console.log(` 模板索引${index}: ID=${item.id}, 名称=${item.name} ← 索引与ID一致`)
|
})
|
|
console.log('\n--- 问题对比 ---')
|
console.log('前端筛选问题:')
|
console.log(' - 点击索引0，期望ID=2，但可能获取到错误的ID')
|
console.log(' - 分页数据混乱，hasMore计算错误')
|
console.log(' - 加载更多时数据重复或丢失')
|
|
console.log('\n后端筛选优势:')
|
console.log(' - 索引与ID完全对应')
|
console.log(' - 分页逻辑正确')
|
console.log(' - 数据一致性保证')
|
|
console.log('\n--- 状态映射测试 ---')
|
const filterStatusMapping = {
|
'all': null,
|
'upcoming': 1,
|
'ongoing': 2,
|
'ended': 3
|
}
|
|
Object.entries(filterStatusMapping).forEach(([filterStatus, state]) => {
|
const result = backendFilter(mockBackendData, state)
|
console.log(`filterStatus="${filterStatus}" → state=${state} → 结果${result.length}条`)
|
})
|
|
console.log('\n=== 测试完成 ===')
|
