[SwiftUI] 親ViewでListから行を削除すると子Viewで範囲外アクセスでクラッシュする

Question

前提・実現したいこと

親のViewの中でList Viewを作り、行を子供のViewで表示する構成です。
子Viewでは、PickerやStepperで元の配列の要素を直接参照しています。
この状態でListから行を削除（左スワイプ）すると、子Viewで配列の範囲外アクセスでクラッシュしてしまいます。
下記のサンプルでは簡略化してStringの読み出しにしていますが、同様の症状になります。

発生している問題・エラーメッセージ

Listから行を削除すると、子Viewで以下のエラーが発生します。

Thread 1: Fatal Error: Index out of range

デバッガでindex値を確認すると、確かに行削除する前には存在していたが削除で範囲外になったindexでアクセスしています。

SceneDelegate.swiftは以下のように変更しています。
let contentView = ContentView().environmentObject(Test())

該当のソースコード

import SwiftUI

struct Data: Hashable, Identifiable {
    let id = UUID()
    let name: String
}
class Test: ObservableObject {
    @Published var datas = [Data]()

    init() {
        datas.append(Data(name: "A"))
        datas.append(Data(name: "B"))
    }
    
    func index(_ data: Data) -> Int {
        return (datas.firstIndex(where: { $0.id == data.id })!)
    }
}

struct RowView1: View {
    @EnvironmentObject var test: Test
    let index: Int
    
    var body: some View {
        Text(test.datas[index].name)
    }
}

struct RowView2: View {
    @EnvironmentObject var test: Test
    var data: Data
    var index: Int {
        test.datas.firstIndex(where: { $0.id == data.id })!
    }

    var body: some View {
        Text(test.datas[index].name)
     }
}
    
struct ContentView: View {
    @EnvironmentObject var test: Test
    
    var body: some View {
        List {
            ForEach(test.datas) { data in
                RowView1(index: self.test.index(data)).environmentObject(self.test)
//              RowView2(data: data).environmentObject(self.test)
//              Text(self.test.datas[self.test.index(data)].name)
            }.onDelete { offsets in
                self.test.datas.remove(atOffsets: offsets)
            }
        }
    }
}

試したこと

コード中でコメントアウトしている、引数をindexではなくオブジェクトを渡すRowView2()でもクラッシュします。
Thread 1: Fatal Error: Unexpectedly found nil while unwrapping an Optional value
削除済オブジェクトのidで配列を探しているようです。

また、もう一つのコメントアウトのように、子供のViewを作らずに親Viewの中で処理を直接記述すると意図通りに動作しました。
しかし、実際に実現したい行の処理は大きいため子供のViewを作りたいのでこの方法では回避できません。
iPadOS13.1,13.3,13.4いずれも同様の症状でした。

EnvironmentObjectで監視対象にして行削除すればListが正しく更新表示される仕様だと思うのですが、Viewをまたぐ構成には対応していないのでしょうか？
仕様の誤解やコードの間違えなどがあったらご指摘よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

環境はXcode Version 11.4で、iPadシミュレータとiPadOS13.4の実機で確認しています。

Comments

[hoshi-takanori]

オブジェクトを index で参照するという発想が良くないのだと思います。RowView2 でせっかく data を渡しているのに、いったん index にして data を取得し直す意味がわかりません。渡された data をそのまま使えばいいのでは。

[shigeoxa]

回答ありがとうございます。
確かにサンプルだと配列を直接参照する意味がありませんが、本来やりたいことはPickerやStepperで構造体配列の要素を直接変更する必要があるためです。
この方法はSwiftUIのチュートリアルLandmarkDetail.swiftにあった以下のコードを参考にしました。
Button(action: {self.userData.landmarks[self.landmarkIndex].isFavorite.toggle()})
RowView2がこのパターンです。
その後色々試したところ回避策を見つけることができました。「解決方法」に記入します。

Answer 1

時間のある時に少しずつ回答を書いていたところ、既に自己解決されていましたが、
せっかく書いたので、遅ればせながら一応回答を入れておきます。

コードをコピペして動きを確認してみました。

RowView1のindexは、RowView1インスタンス生成時に初期化され、以後不変に保持される変数なのに対して、test.datasは、セルの削除に伴って配列の要素数が変化するデータです。
セルを削除した時にonDeleteでtest.datasの要素数を1個に減らすと、RowView1の@EnvironmentObjectで宣言した変数の変化が検知され、Viewの再構築が動作し、indexが1で初期化されているRowView1の再構築動作の中で test.datas[1]にアクセスしてクラッシュしているようです。

onDeleteでセルを削除したのだから、indexが1のRowViewの再構築は動作せずにそのまま破棄されるような動作になっているのであれば、エラーは発生しないと思いますが、現実の動作は削除したRowViewに対してViewの再構築が動作するようです。
簡単に修正するなら、次のようにして

struct RowView: View {
    @EnvironmentObject var test: Test
    let index: Int

    var body: some View {
        Text(index < test.datas.count ? test.datas[index].name : "")
    }
}

indexが現在のtest.datasの要素数以内なら test.datas[index]にアクセスするようにガードすれば、一応正常に動作するようです。(これは、自己解決された方法とほぼ同じやり方です。)

しかし問題の根本は、時系列に変化するデータであるtest.datasをインスタンス生成時に初期化されたindexでアクセスしている(時系列の異なるデータにアクセスしている)ことにあると思います。

例えば、次のようにして

struct RowView: View {
    let test: Test
    let index: Int

    var body: some View {
        Text(test.datas[index].name)
    }
}

testを@EnvironmentObject変数ではなく、インスタンス生成時に初期化される変数として保持しておき、
ForEachの中で

RowView(test: self.test, index: self.test.index(data))

このようにRowViewを初期化すれば、@EnvironmentObjectの test.datasがどのように変化しても
RowViewに引き渡したtest.datasは変化しないので、エラーは発生しなくなります。

しかし、そもそもある1つの配列要素を表示するためにあるRowView1が、配列全体のtest.datasにアクセスしていること自体がおかしな設計になっていると思います。

普通は、次のようにRowViewを定義して

struct RowView: View {
    let data: Data

    var body: some View {
        Text(data.name)
    }
}

次のようにdataを渡してRowViewを初期化するだけで正常に動作します。

RowView(data: data)

---

(4/1 23:40追記)

配列要素内の変数値をStepper等で変更したい場合、
私だったら次のよう@Bindingで配列要素内のDataを受け渡しして処理します。
配列全体(test.datas)をRowView1に参照させるべきではないと思います。

struct RowView1: View {
    @Binding var data: Data
    
    var body: some View {
        Stepper(value: $data.count) {
            Text(data.name + "(data.count)")
        }
    }
}

struct ContentView: View {
    @EnvironmentObject var test: Test
    
    var body: some View {
        List {
            ForEach(0..<test.datas.count, id: .self) { i in
                RowView1(data: self.$test.datas[i])
            }.onDelete { offsets in
                self.test.datas.remove(atOffsets: offsets)
            }
        }
    }
}

---

(4/6 23:55追記)

コメントを受けて、追加確認しました。
確かに@EnvironmentObject var test: Testを追加するとAppDelegateでIndex out of rangeのエラーが発生します。

それで紹介していただいた記事等を読んだ上でよく考え直してみたのですが、前回提示したコードでRowViewに受け渡している self.$test.datas[i] は、一見、配列の要素であるDataだけを受け渡しているように見えますが、実は内部ではtest全体を共有した状態で受け渡しているのではないかと考えるようになりました。DataはstructなのでDataの要素を書き換えるにはDataインスタンスの差し替えが必要で、Dataインスタンスの差し替えをするには、共有されたData配列全体の何番目の要素を差し替えるか知っていないといけないからです。
つまり、前回示したコードは、RowViewの中で配列全体や配列番号にアクセスするようなコードは自分で明示的に書いていませんが、実は$dataの内部で配列全体へのアクセスが発生しており、削除された配列番号にアクセスしてしまうという問題は結局解決されていないのではないかと思います。

EnvironmentObjectの有無でエラーが発生するかしないかは、ListからViewが削除される前にViewを再構築するか否かという微妙な動きの違いで、たまたまエラーが発生したりしなかったりするというだけなのではないかと思います。

そのため、受け渡し先で配列要素を更新するには、配列全体の中から、これから更新するData位置を検索して、存在していればそれを更新し、削除されて既に存在していなければ更新しないという形で処理するしかない(それが最も安全なやり方である)と思うようになりました。これはつまり、Appleのチュートリアルでやっているやり方(RowView2のやり方)と同じ考え方です。ただ、Appleのチュートリアルは、データの削除がないという前提のコードなのでfirstIndexメソッドの結果を !でアンラップしていて、そこでエラーが発生しています。データの削除があることを前提にするなら、それがnilだった場合は何もしないようにしたので良さそうに思います。それを踏まえて、配列要素内の値をStepperで変更したい場合、自分ならこうするというのをもう一度書き直してみました。

struct RowView: View {
    @EnvironmentObject var test: Test
    let data: Data
    
    @State var count: Int = 0
    
    var body: some View {
        Stepper(value: $count, onEditingChanged: {touchDown in
            if !touchDown {
                if let index = self.test.datas.firstIndex(where: {$0.id == self.data.id}) {
                    self.test.datas[index].count = self.count
                }
            }
        }) {
            Text(data.name + "(data.count)")
        }.onAppear {
            self.count = self.data.count
        }
    }
}

struct ContentView: View {
    @EnvironmentObject var test: Test
    
    var body: some View {
        List {
            ForEach(test.datas) { data in
                RowView(data: data)
            }.onDelete { offsets in
                self.test.datas.remove(atOffsets: offsets)
            }
        }
    }
}

今回の件は、とても勉強になりました。ありがとうございます。

Comments

[shigeoxa]

回答ありがとうございます。
回避できたとは言えモヤモヤしていたのでスッキリしました。
もう少し以下の点についてご意見頂けると嬉しいです。

コメント頂いたように、確かに「表示」だけが目的であれば配列要素の値渡しで良いのですが、実現したかったことはStepperなどでの「変更」です。サンプルが良くなかったので書き換えてみました。
struct Data: Hashable, Identifiable {
let id = UUID()
let name: String
var count = 0 // この値を更新したい
}

struct RowView1: View {
@EnvironmentObject var test: Test
let index: Int

var body: some View {
Stepper(value: $test.datas[index].count) {
Text(test.datas[index].name + "(test.datas[index].count)")
}
}
}

struct RowView2: View {
@EnvironmentObject var test: Test
var data: Data
var index: Int {
test.datas.firstIndex(where: { $0.id == data.id })!
}

var body: some View {
Stepper(value: $test.datas[index].count) {
Text(test.datas[index].name + "(test.datas[index].count)")
}
}
}
このようにユーザ操作で配列の中身を変更する、というのが本来やりたかったことです。
こうした要件の場合、どのような設計が良いのかヒントなどありましたらよろしくお願いします。

今回の方法はSwiftUIのチュートリアルで見つけました。
https://developer.apple.com/tutorials/swiftui/handling-user-input
Section6のStep2です。これがRowView2のパターンです。
しかし、この方法だと要素の値を渡しているのに子供のViewの中でindexを算出して元の配列を変更するので、呼び出し側からすると気持ちが悪いと思いました。
そこで、いっそのこと子供が配列をアクセスすることを明確にするためindex渡しにしてみました（RowView1）。
しかし、確かにRowViewは対象の行だけを扱う方が良いと思います。Cだと配列の要素のポインタを渡すところですが、SwiftUIでは良い方法が思いつきませんでした。

ちなみに上記チュートリアルのコードにonDeleteを付けた場合もfatal errorになりました。

[TakeOne]

Stepperを使った場合の修正例を追記しておきました。

[shigeoxa]

回答ありがとうございます。
このサンプルコードだと範囲チェックなしで行削除も意図通りに動作するのを確認できました。
ところが、目的のコードに組み込んでみたところ、今度はclass AppDelegateでfatal errorとなってしまいました。
頂いたサンプルコードでも以下のようにRowView1に一行追加して行削除を実行すると、上記と同様のエラーになりました。
struct RowView1: View {
@EnvironmentObject var test: Test // これを追加
@Binding var data: Data

var body: some View {
Stepper(value: $data.count) {
Text(data.name + "(data.count)")
}
}
}
目的のコードでも上記と同様に対象の配列を含んだクラスを@EnvironmentObjectで参照しているのが悪いのかもしれません。
この参照をやめるようにコードを再整理してみようと思いますが、ちょっと気になるページも見つけました。
https://yutailang0119.hatenablog.com/entry/delatable-table-with-textfield-on-swiftui

このページに書いてあることはまだ良く理解できていないので、もう少し勉強してみようと思います。
いろいろありがとうございました。

[TakeOne]

前回提示したコードは、結局問題解決になっていないのではないかと思うようになりました。新たな回答を追加しておきました。

[shigeoxa]

色々解析情報ありがとうございます。
実は内部で配列全体を受け渡しているのでは、という考えは確かにその通りだと思いました。
あと、Stepperに渡す@Stateのプロパティをローカルに配置する方法は以前試したのですが、元の値を表示させる方法が分からなくて諦めていましたが、onAppearで設定する方法があったのですね。
大変参考になりました。今後活用したいと思います。ありがとうございました。

Answer 2

以下のようにindexが配列内のときだけText()するように変更したらエラーにならなくなりました。
最初Groupを思い付かなくてif文を入れるとコンパイルエラーになって諦めてましたが、Groupの存在を知ったので解決できました。

struct RowView1: View {
    @EnvironmentObject var test: Test
    let index: Int
    
    var body: some View {
        Group {
            if (index < test.datas.count) {
                Text(test.datas[index].name)
            }
        }
    }
}