SwiftUI中ForEach+Equatable视图删除后TextField绑定异常排查

问题背景 #

开发SwiftUI应用时，列表项包含TextField，为优化性能给子视图实现了Equatable以避免不必要的重渲染。但删除列表项后，出现TextField绑定混乱：编辑时多个字段同步更新，甚至触发“Index out of range”崩溃。

复现步骤 #

• 运行下方代码
• 删除“text 2”项
• 编辑“text 3”的TextField，发现“text 3”和“text 4”同步更新
• 删除“text 3”后编辑“text 4”，应用崩溃

struct MyDataItem: Identifiable, Equatable {
    var id = UUID().uuidString
    var text: String = ""
    var placeholder: String = ""
    
    static func == (lhs: MyDataItem, rhs: MyDataItem) -> Bool {
        return lhs.id == rhs.id &&
        lhs.text == rhs.text &&
        lhs.placeholder == rhs.placeholder
    }
}

struct BugPrepro: View {
    
    @State var data: [MyDataItem] = [
        MyDataItem(placeholder: "text 1"),
        MyDataItem(placeholder: "text 2"),
        MyDataItem(placeholder: "text 3"),
        MyDataItem(placeholder: "text 4")
    ]
    
    var body: some View {
        VStack {
            ForEach($data, id: \.id) { $dataItem in
                LineItemView(dataItem: $dataItem, onDelete: {
                    data.removeAll { $0.id == dataItem.id }
                })
            }
        }
    }
}

struct LineItemView: View, Equatable {
    
    @Binding var dataItem: MyDataItem
    var onDelete: () -> Void
    
    var body: some View {
        HStack {
            TextField(dataItem.placeholder, text: $dataItem.text)
            Button(action: onDelete) {
                Text("Delete")
                    .foregroundColor(.red)
            }
        }
        .padding()
        .border(.black)
    }
    
    static func == (lhs: LineItemView, rhs: LineItemView) -> Bool {
        return lhs.dataItem == rhs.dataItem
    }
}

问题原因 #

核心冲突在于SwiftUI视图复用逻辑与自定义Equatable实现的不匹配：

1. 当给LineItemView实现Equatable后，SwiftUI会通过该判断决定是否复用现有视图。
2. 删除数组元素后，数组索引发生变化，但被复用的旧视图的@Binding仍指向原来的索引位置，而该位置现在对应新的数组元素，最终导致多个视图绑定到同一个数据源，出现同步更新或索引越界问题。

解决方案 #

方案1：移除子视图Equatable，改用ForEach层面优化 #

删除LineItemView的Equatable实现，转而在ForEach的子视图上添加.equatable()修饰符。这样SwiftUI会基于MyDataItem的Equatable判断是否更新子视图，既保留性能优化，又避免绑定混乱：

struct MyDataItem: Identifiable, Equatable {
    var id = UUID().uuidString
    var text: String = ""
    var placeholder: String = ""
    
    static func == (lhs: MyDataItem, rhs: MyDataItem) -> Bool {
        return lhs.id == rhs.id &&
        lhs.text == rhs.text &&
        lhs.placeholder == rhs.placeholder
    }
}

struct BugPrepro: View {
    
    @State var data: [MyDataItem] = [
        MyDataItem(placeholder: "text 1"),
        MyDataItem(placeholder: "text 2"),
        MyDataItem(placeholder: "text 3"),
        MyDataItem(placeholder: "text 4")
    ]
    
    var body: some View {
        VStack {
            ForEach($data, id: \.id) { $dataItem in
                LineItemView(dataItem: $dataItem, onDelete: {
                    if let index = data.firstIndex(where: { $0.id == dataItem.id }) {
                        data.remove(at: index)
                    }
                })
                .equatable() // 移至此处实现性能优化
            }
        }
    }
}

struct LineItemView: View { // 移除Equatable实现
    @Binding var dataItem: MyDataItem
    var onDelete: () -> Void
    
    var body: some View {
        HStack {
            TextField(dataItem.placeholder, text: $dataItem.text)
            Button(action: onDelete) {
                Text("Delete")
                    .foregroundColor(.red)
            }
        }
        .padding()
        .border(.black)
    }
}

方案2：修正LineItemView的Equatable实现 #

若坚持给子视图实现Equatable，需优先基于dataItem的唯一标识id判断，同时兼顾text变化（保证TextField内容更新时视图能刷新），确保数组元素变化后视图能正确更新绑定：

struct LineItemView: View, Equatable {
    @Binding var dataItem: MyDataItem
    var onDelete: () -> Void
    
    var body: some View {
        HStack {
            TextField(dataItem.placeholder, text: $dataItem.text)
            Button(action: onDelete) {
                Text("Delete")
                    .foregroundColor(.red)
            }
        }
        .padding()
        .border(.black)
    }
    
    static func == (lhs: LineItemView, rhs: LineItemView) -> Bool {
        // 优先比较唯一id，再比较text保证文本更新时视图刷新
        return lhs.dataItem.id == rhs.dataItem.id && lhs.dataItem.text == rhs.dataItem.text
    }
}

额外优化：提升删除效率 #

将原删除逻辑改为通过索引删除，避免遍历整个数组：

onDelete: {
    if let index = data.firstIndex(where: { $0.id == dataItem.id }) {
        data.remove(at: index)
    }
}

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