SwiftUI NavigationLink @Binding of an array element causes Fatal error: Index out of range

Question

I am having an observable object that is my unique source of truth :

class NetworkFetcher: ObservableObject {
    @Published var list: [Car] = [Car(id: UUID().uuidString, name: "Tesla"), Car(id: UUID().uuidString, name: "BMW")]

    func erase() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0) {
            self.list = []
        }
    }

    func add() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0) {
            self.list = [Car(id: UUID().uuidString, name: "Tesla S"), Car(id: UUID().uuidString, name: "BMW M3")]
        }
    }
}

Here is the car :

struct Car: Identifiable, Hashable {
    var id: String
    var name: String
}

Here the erase and add (functions that edit the list) work and everything is ok :

struct ContentView: View {
    @ObservedObject var net: NetworkFetcher = NetworkFetcher()

    var body: some View {
        NavigationView {
            VStack {
                ListView(liste: self.$net.list, net: self.net)
                Button(action: {
                    self.net.erase()
                }) {
                    Text("erase")
                }
                Button(action: {
                    self.net.add()
                }) {
                    Text("add")
                }
            }
        }
    }
}

struct ListView: View {
    @Binding var liste: [Car]
    @ObservedObject var net: NetworkFetcher

    var body: some View {
        List {
            ForEach(liste.indices, id: \.self) { i in
                NavigationLink(destination: CarView(c: self.$liste[i], net: self.net)) {
                    Text(self.liste[i].name)
                }
            }
        }
    }
}

The problem is here :

struct CarView: View {
    @Binding var c: Car
    @ObservedObject var net: NetworkFetcher

    var body: some View {
        VStack {
            TextField("car name :", text: $c.name)
            Button(action: {
                self.net.erase()
            }) {
                Text("erase")
            }
            Button(action: {
                self.net.add()
            }) {
                Text("add")
            }
        }
    }
}

If I click erase button, the main list will change to an empty array. But the app crashes and I am getting this error :

Fatal error: Index out of range: file /Library/Caches/com.apple.xbs/Sources/swiftlang/swiftlang-1103.2.25.8/swift/stdlib/public/core/ContiguousArrayBuffer.swift, line 444

The question is :

1. Why ?
2. How to solve it?

Your's sincerely

Answer 1

Wow ! Another question had an answer that applies here. See : https://stackoverflow.com/a/63080022

So you should change your ListView with :

struct ListView: View {
    @Binding var liste: [Car]
    @ObservedObject var net: NetworkFetcher

    var body: some View {
        List {
            ForEach(liste.indices, id: \.self) { i in
                NavigationLink(destination: self.row(for: i)) {
                    Text(self.liste[i].name)
                }
            }
        }
    }

    private func row(for idx: Int) -> some View {
        let isOn = Binding(
            get: {
                // safe getter with bounds validation
            idx < self.liste.count ? self.liste[idx] : Car(id: UUID().uuidString, name: "EMPTY")
        },
            set: { self.liste[idx] = $0 }
        )
        return CarView(c: isOn, net: self.net)
    }
}