SwiftUI：onDelete 无法正确更新 UI

Question

当我使用onDelete() 删除数组的元素时，它会删除数据中的正确项，但会删除 UI 上的最后一项。我看到了this answer，但我已经在使用它推荐的东西了。有什么建议吗？

struct ContentView: View {
    @State var items = ["One", "Two", "Three"]
    
    var body: some View {
        Form{
            ForEach(items.indices, id:\.self){ itemIndex in
                
                let item = self.items[itemIndex]
                
                EditorView(container: self.$items, index: itemIndex, text: item)
                
            }.onDelete(perform: { indexSet in

                self.items.remove(atOffsets: indexSet)

            })
        }
    }
}

这是 EditorView 结构：

struct EditorView : View {
    var container: Binding<[String]>
    var index: Int

    @State var text: String
    
    var body: some View {
        TextField("Type response here", text: self.$text, onCommit: {
            self.container.wrappedValue[self.index] = self.text
            
        })
    }
}

Answer 1

您的ForEach 正在循环您的数组的indices，因此SwiftUI 就是用来识别它们的。当您删除一项时，数组的索引会减少一个，因此 SwiftUI 将其解释为最后一个已被删除。

要正确执行此操作，您应该循环遍历具有唯一 id 的 Identifiable 项目列表。在这里，我创建了一个名为MyItem 的struct，它包含原始String 和一个唯一生成的id。我使用.map(MyItem.init) 将项目转换为[MyItem]。

此外，您的代码需要循环中的索引，因此循环遍历Array(items.enumerated())，这将为您提供(offset, element) 元组的数组。然后告诉 SwiftUI 使用\.element.id 作为id。

请注意，EditorView 现在采用 MyItem 数组。

通过这些更改，SwiftUI 将能够识别您从列表中删除的项目并正确更新 UI。

struct MyItem: Identifiable {
    var name: String
    let id = UUID()
}

struct ContentView: View {
    @State var items = ["One", "Two", "Three"].map(MyItem.init)
    
    var body: some View {
        Form{
            ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                
                EditorView(container: self.$items, index: index, text: item.name)
                
            }.onDelete(perform: { indexSet in
                
                self.items.remove(atOffsets: indexSet)
            })
        }
    }
}

struct EditorView : View {
    var container: Binding<[MyItem]>
    var index: Int
    
    @State var text: String
    
    var body: some View {
        TextField("Type response here", text: self.$text, onCommit: {
            self.container.wrappedValue[self.index].name = self.text
        })
    }
}