在 ForEach 中删除数组元素时 SwiftUI 超出索引

Question

我在这里查看了不同的问题，但不幸的是我找不到答案。这是我的代码：

SceneDelegate.swift

...
let contentView = ContentView(elementHolder: ElementHolder(elements: ["abc", "cde", "efg"]))
...
window.rootViewController = UIHostingController(rootView: contentView)

内容视图.swift

class ElementHolder: ObservableObject {

    @Published var elements: [String]

    init(elements: [String]) {
        self.elements = elements
    }
}

struct ContentView: View {

    @ObservedObject var elementHolder: ElementHolder

    var body: some View {
        VStack {

            ForEach(self.elementHolder.elements.indices, id: \.self) { index in
                SecondView(elementHolder: self.elementHolder, index: index)
            }

        }
    }
}

struct SecondView: View {

    @ObservedObject var elementHolder: ElementHolder
    var index: Int

    var body: some View {
        HStack {
            TextField("...", text: self.$elementHolder.elements[self.index])
            Button(action: {
                self.elementHolder.elements.remove(at: self.index)
            }) {
                Text("delete")
            }
        }
    }

}

当按下删除按钮时，应用程序因索引越界错误而崩溃。

有两件奇怪的事情，应用程序运行时

1）你删除VStack并只是将其ForEach放入或bodyContentView.swift

2）你把代码SecondView直接放到ForEach

只有一件事：我确实需要ObservableObject，此代码只是另一个代码的简化。

更新

我更新了代码并更改Text为 a TextField，因为我不能只传递字符串，我需要双向连接。

Answer 1

该问题是由于单击删除按钮时执行更新的顺序引起的。

按下按钮时，将发生以下情况：

1. elements元素持有者的属性被改变
2. objectWillChange这通过作为协议一部分ElementHolder并由协议声明的发布者发送通知ObservableObject。
3. 订阅该发布者的视图会收到一条消息并将更新其内容。
   1. SecondView 接收通知并通过执行bodygetter 更新其视图。
   2. ContentView 接收通知并通过执行bodygetter 更新其视图。

为了使代码不崩溃，3.1 必须在 3.2 之后执行。尽管（据我所知）不可能控制这个顺序。

最优雅的解决方案是onDelete在 SecondView 中创建一个闭包，该闭包将作为参数传递。

这也将解决架构反模式，即元素视图可以访问所有元素，而不仅仅是它所显示的元素。

整合所有这些将产生以下代码：

struct ContentView: View {
    @ObservedObject var elementHolder: ElementHolder

    var body: some View {
        VStack {
            ForEach(self.elementHolder.elements.indices, id: \.self) { index in
                SecondView(
                    element: self.elementHolder.elements[index],
                    onDelete: {self.elementHolder.elements.remove(at: index)}
                )
            }
        }
    }
}

struct SecondView: View {
    var element: String
    var onDelete: () -> ()

    var body: some View {
        HStack {
            Text(element)
            Button(action: onDelete) {
                Text("delete")
            }
        }
    }
}

这样，甚至可以删除 ElementHolder 并只保留一个@State var elements: [String]变量。

Answer 2

这是可能的解决方案-使身体不SecondView可靠ObservableObject。

使用 Xcode 11.4 / iOS 13.4 进行测试 - 没有崩溃

struct SecondView: View {

    @ObservedObject var elementHolder: ElementHolder
    var index: Int
    let value: String

    init(elementHolder: ElementHolder, index: Int) {
        self.elementHolder = elementHolder
        self.index = index
        self.value = elementHolder.elements[index]
    }

    var body: some View {
        HStack {
            Text(value)     // not refreshed on delete
            Button(action: {
                self.elementHolder.elements.remove(at: self.index)
            }) {
                Text("delete")
            }
        }
    }
}

另一种可能的解决方案是不要ElementHolder在SecondView...中观察，因为不需要呈现和删除它 - 也不会崩溃

struct SecondView: View {

    var elementHolder: ElementHolder // just reference
    var index: Int

    var body: some View {
        HStack {
            Text(self.elementHolder.elements[self.index])
            Button(action: {
                self.elementHolder.elements.remove(at: self.index)
            }) {
                Text("delete")
            }
        }
    }
}

更新：文本字段的变体SecondView（仅更改的是文本字段本身）

struct SecondViewA: View {

    var elementHolder: ElementHolder
    var index: Int

    var body: some View {
        HStack {
            TextField("", text: Binding(get: { self.elementHolder.elements[self.index] },
                set: { self.elementHolder.elements[self.index] = $0 } ))
            Button(action: {
                self.elementHolder.elements.remove(at: self.index)
            }) {
                Text("delete")
            }
        }
    }
}