SwiftUI中NavigationLink内.onAppear触发异常的分页加载问题

问题现象 #

用SwiftUI的NavigationLink单元格.onAppear实现Pokemon API分页加载时，前两页表现正常：滚动到页尾会触发下一页请求，所有单元格的.onAppear都会打印索引。但加载第三页（数据从40条增至60条）后，滚动过第40条，列表能正常显示到60条，但控制台仅偶尔打印新增单元格的索引，.onAppear未按预期触发，导致分页加载逻辑不可靠。

问题原因 #

1. List的视图复用与预加载机制：SwiftUI的List会复用单元格视图，还会提前预加载屏幕外的单元格。新增数据后，List可能直接复用已存在的单元格显示新数据，不会触发这些复用单元格的.onAppear；或者预加载时机和滚动速度不匹配，导致部分单元格的.onAppear未被触发。
2. 用索引作为ForEach标识：原代码中ForEach(0..<creatures.creatureArray.count, id: \.self)用索引作为视图ID，数组新增元素时，原有索引对应的视图身份会混乱，SwiftUI无法正确跟踪每个单元格的出现状态，导致.onAppear触发异常。
3. 仅监听最后一个元素的.onAppear：只在最后一个单元格出现时触发加载，一旦该单元格的.onAppear因复用或预加载未触发，就会错过分页时机。

可靠的分页处理方案 #

1. 改用数据模型作为ForEach数据源 #

抛弃索引遍历，直接遍历creatureArray，用模型自身的唯一标识（Creature已实现Hashable，可直接用id: \.self），让SwiftUI能正确跟踪每个单元格的身份，避免视图复用导致的.onAppear混乱。

2. 提前触发分页加载 #

不要只监听最后一个单元格，改为监听倒数第N个（比如倒数第3个）单元格的.onAppear，增加触发容错率，避免因滚动速度或预加载导致漏触发。

3. 优化ObservableObject的主线程更新 #

原代码用DispatchQueue.main.async更新creatureArray，但已标记@MainActor，可直接在主线程更新，无需额外切换队列。

修正后的代码示例 #

struct Creature: Hashable, Codable {
    var name: String
    var url: String
    // 可选：若url不唯一，可添加id字段，pokeapi的url本身是唯一的，可直接用其作为标识
}
 
@MainActor
class Creatures: ObservableObject {
    private struct Returned: Codable {
        var count: Int
        var next: String?
        var results: [Creature]
    }
    
    var count = 0
    var urlString = "https://pokeapi.co/api/v2/pokemon/"
    @Published var creatureArray: [Creature] = []
    var isFetching = false
    
    func getData() async {
        guard !isFetching else { return }
        isFetching = true
        
        print("🕸 We are accessing the url \(urlString)")
        
        guard let url = URL(string: urlString) else {
            print("😡 ERROR: Could not create a URL from \(urlString)")
            isFetching = false
            return
        }
        
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            guard let returned = try? JSONDecoder().decode(Returned.self, from: data) else {
                print("😡 JSON ERROR: Could not decode returned data.")
                isFetching = false
                return
            }
            self.count = returned.count
            self.urlString = returned.next ?? ""
            // @MainActor已保证主线程，直接更新数组
            self.creatureArray += returned.results
            isFetching = false
        } catch {
            isFetching = false
            print("😡 ERROR: Could not get URL from data at \(urlString). \(error.localizedDescription)")
        }
    }
}
 
struct ContentView: View {
    @StateObject var creatures = Creatures()
    
    var body: some View {
        NavigationStack {
            List {
                // 直接遍历数组，用模型自身作为唯一标识
                ForEach(creatures.creatureArray, id: \.self) { creature in
                    NavigationLink {
                        Text(creature.name)
                    } label: {
                        // 计算当前元素的索引
                        if let index = creatures.creatureArray.firstIndex(of: creature) {
                            Text("\(index+1). \(creature.name)")
                        }
                    }
                    .onAppear {
                        if let index = creatures.creatureArray.firstIndex(of: creature) {
                            print("index = \(index+1)")
                            // 滚动到倒数第3个元素时触发加载，提升容错性
                            let triggerThreshold = max(0, creatures.creatureArray.count - 3)
                            if index >= triggerThreshold && !creatures.isFetching && creatures.urlString.hasPrefix("http") {
                                Task {
                                    await creatures.getData()
                                }
                            }
                        }
                    }
                }
            }
            .toolbar {
                ToolbarItem(placement: .status) {
                    Text("\(creatures.creatureArray.count) of \(creatures.count)")
                }
            }
        }
        .task {
            await creatures.getData()
        }
    }
}

额外优化建议 #

• 可使用ScrollViewReader监听滚动位置，直接判断是否接近列表底部，这种方式比依赖单元格.onAppear更可靠，适合对分页精度要求高的场景。
• 给Creature添加稳定的唯一标识（比如从url中提取ID），避免因name重复导致firstIndex(of:)出错。

内容的提问来源于stack exchange，提问作者Gallaugher