如何使用 Firebase 数据创建和填充 SwiftUI 列表？答案

【问题标题】：How to create and populate SwiftUI list with Firebase data?如何使用 Firebase 数据创建和填充 SwiftUI 列表？
【发布时间】：2020-08-05 20:49:27
【问题描述】：

我需要使用来自 Firebase 实时数据库的分隔字符串来构建 SwiftUI 列表。使用.observeSingleEvent，我成功地从数据库中获取了字符串，将其分离并放入String 数组中。目前，唯一的问题是我无法让数组正确地获取分隔的String 数组值，因为来自 Firebase 的异步数据没有及时加载以使视图确认它。我遇到了什么错误？

谢谢。

@State var syList: [String] = ["1", "2", "3"]

func observeSymptomList(completion: @escaping ([String]) -> Void) {

    var symptomsArray: [String] = [""]

    let ref = Database.database().reference().child("symptoms")

    ref.observeSingleEvent(of: .value, with: { (snapshot) in

        if let value = snapshot.value as? String {
            print(value)
            symptomsArray = value.components(separatedBy: ", ")
            print(symptomsArray)
        }
        else { completion(["error"]) }

    }) { (error) in
        print(error.localizedDescription)}

    print(symptomsArray)
    completion(symptomsArray)
}

var body: some View {
    VStack {
        List {
            Section(header: ListHeader()) {
                ForEach(syList, id: \.self) {sy in
                    Text(sy)
                }
            }

        }.onAppear {
            self.observeSymptomList { (name) in
                self.syList = name
            }
        }
        .listStyle(GroupedListStyle())
    }
    .navigationBarTitle("Stil de viață")
    .navigationBarBackButtonHidden(true)
}

【问题讨论】：

我通常建议将数据访问逻辑提取到视图模型中，并使用@ObservableObject、@Published 和@ObservedObject 来管理状态。 this article 中的代码可能有用（它适用于 Firestore，但应该很容易适应 RTDB）。
说到数据和SwiftUI必看developer.apple.com/videos/play/wwdc2019/226

标签： ios swift firebase firebase-realtime-database swiftui

【解决方案1】：

在从 firebase 接收数据之前，您正在调用完成处理程序。在将值分配给 symptomsArray 之后，您应该放置完成处理程序，如下所示：

func observeSymptomList(completion: @escaping ([String]) -> Void) {
  var symptomsArray: [String] = [""]

  let ref = Database.database().reference().child("symptoms")

  ref.observeSingleEvent(of: .value, with: { (snapshot) in
    if let value = snapshot.value as? String {
      print(value)
      symptomsArray = value.components(separatedBy: ", ")
      completion(symptomsArray) // <-- move this statement here
      print(symptomsArray)
    }
    else { 
      completion(["error"]) 
    }
  }) { (error) in
    print(error.localizedDescription)}
    print(symptomsArray)
}

【讨论】：