How to display value fetched from database? - ios

Question

I’m developing an iOS application with SwiftUI, and I’m having trouble displaying my data fetched from database.
Code
import SwiftUI
import Firebase
import FirebaseDatabase
var ref = Database.database().reference()
class Observe {
static func currentSingleEventObserve(completion: #escaping ((String?) -> ())) {
let path = "supersonic/current"
let ref = Database.database().reference().child(path)
_ = ref.observeSingleEvent(of: .value, with: { snapshot in
let temp = (snapshot.value! as AnyObject).description
completion(temp)
})
}
}
struct CurrentDistance: View {
var value: NSDictionary?
var refHandle: UInt = 0
#State var distance: String
init() {
Observe.currentSingleEventObserve(completion: { temp in
self.distance = temp // I want to mutate self.distance here
})
}
var body: some View {
VStack {
Text("Distance")
Text(self.distance)
}
}
}
struct CurrentDistance_Previews: PreviewProvider {
static var previews: some View {
CurrentDistance()
}
}
Database
|-supersonic
|- current: 30
Problem
I want to mutate self.distance in the initializer. Trying to mutate self.distance in the closure I got an error Escaping closure captures mutating 'self' parameter, and I don't know how to update the value.
How can I display the value fetched from the database?

Answer 1

This is a somewhat generic answer as we are just going to be updating a UI element based on a value read from Firebase.
Firebase is asynchronous and values are only valid following the Firebase function, within the closure.
Suppose we have a simple SwiftUI app that displays a Text object, a button to click to load the data from Firebase, and then a var that holds what the text should be.
struct ContentView: View {
#State var buttonText = "Initial Button Label"
var body: some View {
VStack {
Text(buttonText)
Button(action: {
self.readFirebase()
}) {
Text("Click Me!")
}
}
}
func readFirebase() {
let ref = my_firebase_ref
let textRef = ref.child("string_node")
textRef.observeSingleEvent(of: .value, with: { snapshot in
let myText = snapshot.value as? String ?? "No String"
self.buttonText = myText
})
}
}
Here's my Firebase structure
root
string_node: "Hello, World"