SwiftUI状态更新异常：BackwardableView旧状态残留问题问询

问题描述 #

原本认为对SwiftUI工作原理理解透彻，但处理状态时遇到困惑：触发QuizView的fallback后切换到FallbackView，执行操作后ViewModel移除当前item并加载下一个，但BackwardableView的backward状态会残留给下一个item，导致逻辑异常。尝试添加.id(item.id)标记视图为新实例无效，添加onChange修饰符可解决问题，但疑惑：视图是不可变struct，item也是不可变属性，为何会出现这种状态残留？

相关代码 #

模型 #

struct Item : Equatable {
    let id = UUID()
    let name: String
}

ViewModel #

@Observable
final class ContentViewModel {
    
    var items = [
        Item(name: "test1"),
        Item(name: "test2"),
        Item(name: "test3")
    ]
    
    func mark(item: Item, wrong: Bool) {
        //deal with right or wrong answer
        items.removeAll {
            $0 == item
        }
    }
    
}

视图代码 #

struct ContentView: View {
    
    let viewModel = ContentViewModel()
    
    var body: some View {
        if let item = viewModel.items.first {
            BackwardableView(item) {
                QuizView(item, fallback: $0)
            }
                .environment(viewModel)
        }
    }
}

struct QuizView : View {
    
    private let item: Item
    @Binding private var fallback: Bool
    @Environment(ContentViewModel.self) private var viewModel
    
    init(_ item: Item, fallback: Binding<Bool>) {
        self.item = item
        self._fallback = fallback
    }
    
    var body: some View {
        VStack {
            Text("Quiz \(item.name)")
            Button("Wrong Answer") {
                fallback = true
            }
            Button("Correct Answer") {
                viewModel.mark(item: item, wrong: false)
            }
        }
        
    }
}

struct FallbackView : View {
    
    private let item: Item
    @Environment(ContentViewModel.self) private var viewModel
    
    init(_ item: Item) {
        self.item = item
    }
    
    var body: some View {
        Text("Fallback \(item.name)")
            .toolbar {
                Button("Next") {
                    viewModel.mark(item: item, wrong: true)
                }
            }
    }
}

struct BackwardableView<Content: View> : View {
    
    private let item: Item
    private let content: (Binding<Bool>) -> Content
    
    @Environment(ContentViewModel.self) private var viewModel
    @State private var backward = false
    
    init(_ item: Item, content: @escaping (Binding<Bool>) -> Content) {
        self.item = item
        self.content = content
    }
    
    var body: some View {
        Group {
            if backward {
                FallbackView(item)
            } else {
                content($backward)
            }
        }
              .id(item.id)
//            .onChange(of: item) { oldValue, newValue in
//                if oldValue == newValue {
//                    return
//                }
//                backward = false
//            }
    }
}

问题原因分析 #

核心在于SwiftUI对视图身份和状态存储的管理逻辑：

1. 虽然视图是不可变的struct，但@State变量的存储并不依附于视图struct本身，而是由SwiftUI维护一个独立的状态容器。
2. 这个状态容器的生命周期和视图的身份标识绑定，身份标识由SwiftUI根据视图类型、在视图树中的位置，以及显式添加在视图本身上的.id修饰符共同确定。
3. 原代码中.id(item.id)是加在BackwardableView内部的Group上，而非BackwardableView视图本身。当item更换时，BackwardableView在视图树中的位置、类型都未改变，SwiftUI会判定这是同一个视图实例，因此复用了之前的状态容器，导致backward的值残留。

解决方案验证 #

正确的.id使用方式 #

将.id(item.id)移到BackwardableView视图本身上，而非内部的Group：

struct ContentView: View {
    
    let viewModel = ContentViewModel()
    
    var body: some View {
        if let item = viewModel.items.first {
            BackwardableView(item) {
                QuizView(item, fallback: $0)
            }
            .environment(viewModel)
            .id(item.id) // 给BackwardableView本身添加身份标识
        }
    }
}

这样当item更新时，SwiftUI会识别这是一个全新的BackwardableView实例，创建新的状态容器，backward会初始化为false，不会残留之前的状态。

onChange修饰符生效的原因 #

onChange(of: item)监听item的变化，当新item到来时手动重置backward = false，相当于强制将状态与当前item同步，绕过了SwiftUI的视图身份复用逻辑。

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