异步网络请求后SwiftUI视图模型状态未更新问题排查

问题场景 #

开发支付审核页面时，通过视图的.task调用网络请求获取法律协议内容后，出现两个异常：

1. authorized状态变量的变更无法触发视图更新（点击复选框区域后状态不生效）
2. 控制台持续输出=== AttributeGraph: cycle detected through attribute xxxxx ===警告

注释掉网络请求代码后，状态更新恢复正常。

简化视图代码 #

struct OneTimePayReviewExperienceView: View {
    @State var authorized: Bool = false
    @StateObject var paymentExpViewModel = PaymentExpViewModel()
        
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                
                if let agreementText = paymentExpViewModel.agreementHtml {
                    Text(html: agreementText)
                }
                
                HStack(spacing: 8) {
                    CheckboxTwoToneView(selected: authorized)
                    Text("I authorize this payment to be made.")
                    Spacer()
                }
                .onTapGesture {
                    self.authorized = true
                }
            }//VStack
            .task {
                await paymentExpViewModel.fetchPartnerPaymentAgreement(
                    agreementType: .onetimepayment,
                    policySourceSystemName: paymentInput.policySourceSystem,
                    partnerId: paymentInput.policyPartnerId
                )
            }
        }//ScrollView
    }//body
}

简化视图模型代码 #

@MainActor
class PaymentExpViewModel: ObservableObject {
    @Published var agreementHtml: String?
    let dataManager = AFIDataManager.sharedManager

    func fetchPartnerPaymentAgreement(agreementType: AgreementType,policySourceSystemName: String,partnerId: String) async {
        do {
            let agreementRequest = APIRouter().createRequest(.agreements(agreementType, policySourceSystemName))
            let richContent = try await billingService.fetch(type: AgreementResponse.self, request: agreementRequest)
            var html = richContent.richContent
            
            let partnerPhoneNumber = dataManager.partnerPhoneNumbeer(for: partnerId)
            html += partnerPhoneNumber
            
            self.agreementHtml = html
        } catch {
            self.agreementHtml = nil
        }
    }
}

问题根源 #

核心原因是无限重绘循环：

• 当前.task附加在VStack上，当paymentExpViewModel.agreementHtml更新时，VStack会触发重绘
• 重绘会重新创建并执行.task里的网络请求，请求完成后又更新agreementHtml，再次触发VStack重绘
• 这种循环导致AttributeGraph检测到依赖循环，同时主线程被频繁的视图更新和网络请求阻塞，authorized的状态变更无法及时处理

解决方案 #

方案1：调整.task的绑定层级 #

将.task移到不会随内部视图重绘而重建的容器上（比如ScrollView或根视图），确保请求只执行一次：

struct OneTimePayReviewExperienceView: View {
    @State var authorized: Bool = false
    @StateObject var paymentExpViewModel = PaymentExpViewModel()
        
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                if let agreementText = paymentExpViewModel.agreementHtml {
                    Text(html: agreementText)
                }
                
                HStack(spacing: 8) {
                    CheckboxTwoToneView(selected: authorized)
                    Text("I authorize this payment to be made.")
                    Spacer()
                }
                .onTapGesture {
                    self.authorized = true
                }
            }
        }
        // 将.task移到ScrollView层级，仅在视图首次出现时执行一次
        .task {
            await paymentExpViewModel.fetchPartnerPaymentAgreement(
                agreementType: .onetimepayment,
                policySourceSystemName: paymentInput.policySourceSystem,
                partnerId: paymentInput.policyPartnerId
            )
        }
    }
}

方案2：在ViewModel中添加请求防重入机制 #

通过标记变量避免重复执行请求，即使.task被多次触发也不会重复发起网络调用：

@MainActor
class PaymentExpViewModel: ObservableObject {
    @Published var agreementHtml: String?
    // 添加请求状态标记，防止重复执行
    private var isFetching = false
    let dataManager = AFIDataManager.sharedManager

    func fetchPartnerPaymentAgreement(agreementType: AgreementType,policySourceSystemName: String,partnerId: String) async {
        // 如果正在请求，直接返回
        guard !isFetching else { return }
        isFetching = true
        // 请求结束后重置标记
        defer { isFetching = false }
        
        do {
            let agreementRequest = APIRouter().createRequest(.agreements(agreementType, policySourceSystemName))
            let richContent = try await billingService.fetch(type: AgreementResponse.self, request: agreementRequest)
            var html = richContent.richContent
            
            let partnerPhoneNumber = dataManager.partnerPhoneNumbeer(for: partnerId)
            html += partnerPhoneNumber
            
            self.agreementHtml = html
        } catch {
            self.agreementHtml = nil
        }
    }
}

调试方法 #

1. 监控视图重绘：使用Xcode的Debug View Hierarchy工具，观察VStack或协议文本视图是否频繁重绘；也可以给视图添加.onAppear打印，确认是否重复触发。
2. 追踪请求执行次数：在fetchPartnerPaymentAgreement方法开头添加打印语句，查看是否被多次调用。
3. 监听状态变更：在agreementHtml的didSet中添加打印，确认是否被频繁赋值：

   @Published var agreementHtml: String? {
       didSet {
           print("agreementHtml updated: \(agreementHtml ?? "nil")")
       }
   }
   

4. 性能分析：使用Instruments的Core Animation工具，查看视图的重绘频率，确认是否存在无限循环的重绘操作。

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