Firestoreから取得したデータが正しく表示されない

Question

前提・実現したいこと

SwiftUIとFirebase(FirebaseFirestoreSwift)を利用してアプリの開発をしています。

あるViewを表示する際に、Firestoreからデータを取得し、その中のあるデータを表示したいのですが、実際にFirestoreに保存されているものと、違うデータが表示されてしまいます。

解決の方法ご存知の方おりましたら、ご教授いただきたいです。

発生している問題

以下のようなビューの画面で、タイトルを入力し、[Add]をタップすると、入力した内容がFireStoreのCollectionに保存され、その後全てのDocumentを取得し、表示するという動きをしたいのですが正しく表示されません。

例えば、以下のようになります

1. AAAと入力し[Add]　→　AAAと表示される
2. BBBと入力し[Add]　→　BBBと表示される
3. CCCと入力し[Add]　→　BBBと表示される

この際に、Firebaseのコンソール画面で、データを確認すると入力したとおりに保存されている事を確認できます（AAA,BBB,CCC）。

該当のソースコード

import SwiftUI
import Firebase
import FirebaseFirestoreSwift

struct GetDataTest: View {

    @State var items:[Item] = []
    @State var title:String = ""

    var body: some View {
        VStack{
            List{
                ForEach(self.items.indices, id: .self){index in

                    ListRowTest(
                        title:self.items[index].title
                    )

//                    Text(self.items[index].title)
//                        .font(.title)
//                        .fontWeight(.bold)
                }
            }

            Button(action: {
                self.getAllItems()
            }, label: {
                Text("Update")
            })

            TextField("Enter titel",text:self.$title)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button(action: {

                let item = Item(title: self.title)

                self.addItem(item: item){ (status) in
                    self.getAllItems()
                }
                
                self.title = ""
            }, label: {
                Text("Add")
            })
        }
        .onAppear{
            self.getAllItems()

        }
    }

    func getAllItems(){

        self.items = []

        let ref = Firestore.firestore()
        
        ref.collection("Items").getDocuments{
            (snap, err) in
            guard let docs = snap else{return}

            docs.documentChanges.forEach{ (doc) in
                let item = try! doc.document.data(as:Item.self)
                self.items.append(item!)
            }
        }
    }

    func addItem(item:Item , completion:@escaping (Bool) -> ()){

        let ref = Firestore.firestore()

        do{
            let _ = try
                ref.collection("Items").addDocument(from: item){ (error) in
                    if error != nil{
                        completion(false)
                        return
                    }
                    completion(true)
                }
        }catch{
            print(error.localizedDescription)
            completion(false)
        }
    }
}


struct ListRowTest: View {

    @State var title:String

    var body: some View {
        HStack{
            Text(title)
                .font(.title)
                .fontWeight(.bold)
        }
    }
}


struct Item : Identifiable,Codable {

    @DocumentID var id : String?
    var title : String

    enum CodingKeys : String,CodingKey {
        case id
        case title
    }
}

試したこと

ListRowTest(
    title:self.items[index].title
)

のところを、以下のように変更すると、正しく表示されます。
＊structをコンポーネントとして利用したいので、この方法では解決できません

Text(self.items[index].title)
    .font(.title)
    .fontWeight(.bold)

補足情報

Xcode: Version 12.3

iOS: 14.0

Life Cycle: SwiftUI App

Comments

[hoshi-takanori]

ForEach で　id に \.self つまり index を使ってるためでしょうね。
Item は Identifiable なので、ForEach(self.items) { item in とすれば良いのでは。

[tomaa]

コメントありがとうございます。
この先の開発の仕様の関係で、配列データのindexの利用が必要になるので、ForEach(self.items) { item inの使い方ができないのです。

Answer 1

ListRowTestで宣言しているtitle変数は、インスタンス生成時の引数で値を渡すようにしていると思いますが、その変数の宣言が

@State var title:String

となっています。

インスタンス生成時の引数で値を渡す変数で、変数の値を更新しないものであれば、@State をつけずに var title:String で宣言すべき(変数の値を更新するものであれば、 @Binging で宣言し、生成元はProjected Valueを渡すべき)だと思います。

内部の動作状況を確認してみたところ、@State をつけた変数をインスタンス生成時の引数に指定しても、正しく値が設定されていないようでした。そのため、不正な値が表示されたのではないかと思います。

Comments

[tomaa]

回答いただきありがとうございます。
`@State`を付けずに`var title:String`にすると、期待どおりに動作するようになりました！
アドバイスありがとうございます。