SwiftUI QuizApp视图未重渲染：QuestionView切换题目时状态未重置

问题场景 #

我开发的QuizApp中，HomeViewModel用@Published数组存储题目，QuestionContainerView通过@StateObject持有ViewModel，将数组首个元素传给QuestionView。点击QuestionView的按钮触发showNextQuestion回调后，ViewModel会移除数组首个元素，剩余不足2道时重新获取题目。但切换题目后，QuestionView的timer状态并未重置，仍保留上一题的计时值，预期的@Published触发重渲染未生效。

问题原因 #

SwiftUI默认会尽可能复用现有视图实例。当viewModel.questions数组变化、传入QuestionView的question更新时，只要视图的唯一标识未改变，SwiftUI仅会更新question参数，而不会重新初始化视图——这就导致@State变量（比如timeRemaining）和timer保留了之前的状态。

解决方案 #

方案1：给QuestionView添加唯一标识，强制重建视图 #

在QuestionContainerView中，给QuestionView加上.id(question.id)（假设Question模型有唯一id属性）。当新的question传入时，id发生变化，SwiftUI会销毁旧的QuestionView实例，创建全新的实例，@State变量和timer都会被重置。

修改后的QuestionContainerView代码：

@StateObject private var viewModel: HomeViewModel = HomeViewModel(repository: QuestionRepositoryImpl())

var body: some View {
    if viewModel.isLoading {
        ProgressView()
    } else {
        VStack(alignment: .leading, spacing: 16) {
            if let question = viewModel.questions.first {
                QuestionView(question: question){
                    viewModel.updateQuestions()
                }
                .id(question.id) // 新增：用Question的唯一ID作为视图标识
            } else {
                Text("No more questions")
                    .font(.title2)
            }
        }
        .padding()
    }
}

如果Question模型没有id属性，也可以用数组索引或question.question内容作为临时标识，但建议给Question添加唯一id字段，避免因内容重复导致的判断错误。

方案2：让Question模型遵循Equatable（可选但推荐） #

让Question遵循Equatable协议，帮助SwiftUI更精准地判断question是否发生变化，优化视图更新逻辑：

struct Question: Equatable {
    let id: String // 或UUID、Int类型的唯一标识
    let question: String
    let allAnswers: [String]
    let correctAnswer: String // 假设存在该字段
    
    static func == (lhs: Question, rhs: Question) -> Bool {
        return lhs.id == rhs.id
    }
}

方案3：手动管理Timer生命周期（补充优化） #

原代码中timer用了.autoconnect()，可能导致视图销毁后timer仍在后台运行。改成手动管理timer的连接与取消，让生命周期更可控：

修改后的QuestionView代码：

struct QuestionView: View {
    let question: Question
    let showNextQuestion: () -> Void

    @State private var showCorrectAnswer: Bool = false
    @State private var timeRemaining = 10
    @State private var timer: Timer.TimerPublisher?
    @State private var cancellable: AnyCancellable?

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("\(timeRemaining)")
                .font(.title2)
            
            Text(question.question)
                .font(.title2)
                .padding()
            
            ForEach(question.allAnswers, id: \.self){ answer in
                Button(
                    action: {
                        showCorrectAnswer.toggle()
                        
                        DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
                            showNextQuestion()
                        }
                    },
                    label: {
                        Text(answer)
                            .font(.title2)
                            .padding()
                            .background(getBackgroundColor(answer: answer))
                            .clipShape(Capsule())
                    }
                )
            }
            
            Spacer()
        }
        .onAppear {
            // 视图出现时创建并连接timer
            timer = Timer.publish(every: 1, on: .main, in: .common)
            cancellable = timer?.autoconnect().sink { _ in
                if timeRemaining > 0 {
                    timeRemaining -= 1
                } else {
                    showNextQuestion()
                }
            }
        }
        .onDisappear {
            // 视图消失时取消timer
            cancellable?.cancel()
            timer = nil
        }
    }
    
    private func getBackgroundColor(answer: String) -> Color {
        return showCorrectAnswer ? (answer == question.correctAnswer ? .green : .red) : .blue
    }
}

说明 #

• 方案1是核心解决方法，添加唯一标识后视图会强制重建，彻底重置状态；
• 方案2和3属于优化项，能让代码逻辑更健壮、资源管理更合理。

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