如何使用 firebase/firestore 在 SwiftUI 中将数据加载到视图中答案

【问题标题】：How to load data into a view in SwiftUI with firebase/firestore如何使用 firebase/firestore 在 SwiftUI 中将数据加载到视图中
【发布时间】：2020-06-22 12:11:52
【问题描述】：

我正在尝试使用 Firebase/Firestore 将数据加载到 SwiftUI 视图中。数据从数据库加载，但不会传递到视图中。

我知道它会加载，因为我会在加载后打印它。

我有一个 HomeView.Swift 文件如下：

import SwiftUI
import Firebase

struct HomeView: View {
    let data = GetIphonesData()
    var body: some View {
        NavigationView {
            if (data.data.count == 0) {
                Loader()
                .navigationBarTitle("Loading", displayMode: .inline)
            } else {
                List() {
                    Section(header: Text("iPhone")) {
                        ForEach(data.data , id: \.id) { iphone in
                            ProductNavigationLinkView(model: iphone)
                        }
                    }
                }.listStyle(GroupedListStyle())
                .navigationBarTitle("Home", displayMode: .inline)
            }
        }
    }
}

我有一个 GetIphoneData.Swift 类，如下所示：

import Foundation
import Firebase
import Combine

class GetIphonesData : ObservableObject {
    @Published var data = [Iphone]()

    init() {
        let db = Firestore.firestore()

        db.collection("iphones").addSnapshotListener { (snap, err) in
            if err != nil {
                print((err?.localizedDescription)!)
                return
            } else {
                print("no errors")
                for i in snap!.documentChanges {
                    let id = i.document.documentID
                    let name = i.document.get("name") as! String

                    self.data.append(Iphone(id: id,
                                            name: name))
                }
                print(self.data)
            }
        }
    }
}

【问题讨论】：

标签： swift database firebase google-cloud-firestore swiftui

【解决方案1】：

SwiftUI 在主线程上更新其视图的内容。将 addSnapshotListener 的闭包内容包装到 Dispatch.main.async 中。

db.collection("iphones").addSnapshotListener { (snap, err) in
  DispatchQueue.main.async {
    if err != nil {
        print((err?.localizedDescription)!)
        return
    } else {
        print("no errors")
        for i in snap!.documentChanges {
            let id = i.document.documentID
            let name = i.document.get("name") as! String

            self.data.append(Iphone(id: id,
                                    name: name))
        }
        print(self.data)
    }
  }
}

您的let data = GetIphonesData() 还应该有@ObservedObject 属性包装器：

struct HomeView: View {
    @ObservedObject var data = GetIphonesData()
    // ...

请参阅this answer 作为使用@ObservedObject 和@Published 的参考

【讨论】：