SwiftUI Async data fetch in onAppear

问题

I have class getDataFromDatabase which has func readData() thats read data from Firebase.

class getDataFromDatabase : ObservableObject {

    var arrayWithQuantity = [Int]()
    var arrayWithTime = [Double]()
    
    func readData(completion: @escaping(_ getArray: Array<Int>?,_ getArray: Array<Double>?) -> Void) {
       
        let db = Firestore.firestore()
        
        db.collection("amounts").getDocuments { (querySnapshot, err) in
            
            if let e = err{
                print("There's any errors: \(e)")
            }
            
            if err != nil{
                print((err?.localizedDescription)!)
                return
            }
            
            for i in querySnapshot!.documents{
                
                let quantityFromDb = i.get("amount") as! Int
                let timeFromDb = i.get("averageTimeRecognition") as! Double
                
                
                self.arrayWithQuantity.append(quantityFromDb)
                self.arrayWithTime.append(timeFromDb)
            }
            completion(self.arrayWithQuantity, self.arrayWithTime)
        }
    }
}

I use func readData() in onAppear:

struct CheckDatabaseView: View {
    
    @State private var quantityFromDatabase: Array<Int> = []
    @State private var timeFromDatabase: Array<Double> = []
    @State private var flowersName: Array<String> = ["Carnation", "Daisy", "Hyacinth", "Iris", "Magnolia", "Orchid", "Poppy", "Rose", "Sunflower", "Tulip"]
    @State private var isReady: Bool = false
    
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false){
            ZStack(alignment: .top){
                VStack(spacing: 40){
                    Text("Hello, world!")
//                    BarView(value: CGFloat(timeFromDatabase[0]), name: flowersName[0])
                    
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top)
            
        }
        .navigationBarTitle(Text("Your datas in database").foregroundColor(.blue), displayMode: .inline)
        .onAppear{
            
            let gd = getDataFromDatabase()
            gd.readData { (quantity, time) in
                self.quantityFromDatabase = quantity!
                self.timeFromDatabase = time!       
            }
        }
    }
}

I cannot use values self.quantityFromDatabase and self.timeFromDatabase because are empty. I know the problem is with the asynchronous retrieval of data. I've tried with DispatchQueue.main.async, but I still not get these values. How is the other method to get it? I need this values, because I want to draw charts in VStack (the comment line there).

EDIT

As @Rexhin Hoxha wrote below, i modified the code but i am not sure if the way is correct. I changed var arrayWithQuantity = [Int]() and var arrayWithTime = [Double]() by adding @Published in class getDataFromDatabase (now it's GetDataFromDatabaseViewModel):

class GetDataFromDatabaseViewModel : ObservableObject {

    @Published var arrayWithQuantity = [Int]()
    @Published var arrayWithTime = [Double]()
    
    func readData() {
       
        let db = Firestore.firestore()
        
        db.collection("amounts").getDocuments { (querySnapshot, err) in
            
            if let e = err{
                print("There's any errors: \(e)")
            }
            
            if err != nil{
                print((err?.localizedDescription)!)
                return
            }
            
            for i in querySnapshot!.documents{
                
                let quantityFromDb = i.get("amount") as! Int
                let timeFromDb = i.get("averageTimeRecognition") as! Double
                
                
                self.arrayWithQuantity.append(quantityFromDb)
                self.arrayWithTime.append(timeFromDb)
            }
            print("Array with quantity: \(self.arrayWithQuantity.count)")
        }
    }
}

also in struct I initialized @ObservedObject var gd = GetDataFromDatabaseViewModel() and onAppear now looks like this:

.onAppear{
            
            self.gd.readData()
            print("Quantity after reading: \(self.gd.arrayWithQuantity.count)")
        }

but print in onAppear still print an empty Array. Where did I do a mistake?

回答1:

So the problem is in your completion handler. It returns before you retrieve the data.

Solution is to make your arrays @Published and read the data in real time from the view. You have to remove the completion handler.

Call the function on ‚onAppear()‘ and use @ObservedObject to bind to your ViewModel (getDataFromDatabase). This is how it’s done in SwiftUI.

Please capitalize the first letter and use something more generic like „YouViewName“ViewModel.

Your name is fine for a method/function but not for a Class

来源：https://stackoverflow.com/questions/63330464/swiftui-async-data-fetch-in-onappear