SwiftUI中PhotosPicker的onChange因异步函数多次触发的原因及解决办法

触发多次的核心原因 #

1. PhotosPicker内部状态流转：选择视频时，selectedItem并非一次性从nil切换到最终选中项，而是会经历多次状态更新（比如临时中间值、系统内部状态同步），每一次变化都会触发onChange。
2. 异步Task的视图周期干扰：在onChange闭包中手动创建Task时，异步操作会脱离当前视图更新流程。如果异步函数执行速度快（比如空的dummyFunc），视图可能因Task完成触发重绘，进而重复执行onChange闭包。

解决办法1：使用task(id:)替代手动创建Task #

task(id:)是SwiftUI专为绑定异步任务到状态值设计的修饰符，仅当指定的id变化时启动一次新任务，还会自动取消旧任务，完美适配该场景：

struct ContentView: View {
    @State private var selectedItem: PhotosPickerItem?

    var body: some View {
        VStack {
            PhotosPicker("Select movie", selection: $selectedItem, matching: .videos)
        }
        .task(id: selectedItem) {
            guard let selectedItem = selectedItem else { return }
            await dummyFunc()
        }
    }
    
    func dummyFunc() async {
        
    }
}

解决办法2：过滤无效状态+重复处理拦截 #

若坚持使用onChange，可通过判断selectedItem非空，并记录已处理的item标识符，避免重复执行：

struct ContentView: View {
    @State private var selectedItem: PhotosPickerItem?
    @State private var processedItemId: String?

    var body: some View {
        VStack {
            PhotosPicker("Select movie", selection: $selectedItem, matching: .videos)
        }
        .onChange(of: selectedItem) { newItem in
            guard let newItem = newItem, 
                  newItem.id.uuidString != processedItemId else { return }
            
            processedItemId = newItem.id.uuidString
            Task {
                await dummyFunc()
            }
        }
    }
    
    func dummyFunc() async {
        
    }
}

解决办法3：防抖处理（适合非即时响应场景） #

通过延迟执行忽略短时间内的重复触发，确保只处理最后一次状态变化：

struct ContentView: View {
    @State private var selectedItem: PhotosPickerItem?
    private var debounceTimer: DispatchSourceTimer?

    var body: some View {
        VStack {
            PhotosPicker("Select movie", selection: $selectedItem, matching: .videos)
        }
        .onChange(of: selectedItem) { newItem in
            debounceTimer?.cancel()
            guard let newItem = newItem else { return }
            
            debounceTimer = DispatchSource.makeTimerSource(queue: .main)
            debounceTimer?.schedule(deadline: .now() + 0.1)
            debounceTimer?.setEventHandler {
                Task {
                    await dummyFunc()
                }
            }
            debounceTimer?.resume()
        }
        .onDisappear {
            debounceTimer?.cancel()
        }
    }
    
    func dummyFunc() async {
        
    }
}

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