SwiftUI tabviewで初期home画面のデータが表示できない

Question

現状態・前提・実現したいこと

SwiftUI：tabviewで初期tab1(home)画面のデータが表示できない理由と対応方法が知りたいです。
タブ（下部）切り替えできる下記のソースtab1にこちらのページ
を使いスクロールしてスマートニュースのように上部のタブと画面が切り替わるようにしています。

 TabView {
            
           tab1()
     
            //タブ表示
                    .tabItem {
                        Image("home")
                        Text("ホーム")
                    }
                tab2()
                    .tabItem {
                        Image("position")
                        Text("hoge")
                    }
           //以下省略     
  

発生している問題

tab1画面に表示するデータはfirebaseから引っ張ってきたデータをForeachで回し表示しようとしています。
しかしアプリを立ち上げたり下部のタブをtab1（home）に切り替えるとデータは表示されません。

tab1の中のページで
２ページめに移動しようとタップして横にスクロールしようとしたり（ちょびっと画面を動かす）、スクロールして画面に戻ると表示されます。

２ページ以降のデータは表示されてます。。。。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
「初期画面、tab1選択時にデータが表示されない画像」

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
「上部タブ内のページを切り替えようと指を動かしたら表示された時の画像」
果物が一列に横並びになっている部分が１ページ目表示されていなかった部分です。

表示画面のビューとデーター取得のソースは以下になります。

struct ProductListView: View {
  
    @ObservedObject var productVM = ProductViewModel() 
    var body: some View {
        
         let chunkedProducts = self.productVM.products.chunked(into: 3)
       
         ScrollView {
             
            VStack {
               ForEach(0..<chunkedProducts.count) { index in
                   HStack {
                       ForEach(chunkedProducts[index]) { product in
                        ProductCell(product: product)
                       }
                   }
               }
            }
        }
    }
}

ーーーー
import Foundation
import Firebase


class ProductViewModel:ObservableObject{
    @Published var products:[Product] = []
    
    init() {
        self.fetchProducts()
    }


    func fetchProducts() {
            PRODUCTS_REF.observeSingleEvent(of: .value) { (snapshot) in
                guard let allObjects = snapshot.children.allObjects as? [DataSnapshot] else { return }
                allObjects.forEach { (snapshot) in
                    let productId = snapshot.key
                    
                    Database.fetchProduct(with: productId) { (product) in
                        self.products.append(product)
                    }
                    
                }

            }
        
    }
    
    
    
}

Answer 1

chunkedProducts 部分だと思います。
非同期で取得するのでしたら定数宣言時はデータが空の可能性あります。
直接 self.productVM.products.chunked(into: 3) を使うようにすれば表示されると思います。

Comments

[swiftybird2]

直接使うとは下記のようにってことでしょうか？
VStack {
ForEach(0..<self.productVM.products.chunked(into: 3).count) { index in
HStack {
ForEach(self.productVM.products.chunked(into: 3)[index]) { product in
ProductCell(product: product)
}
}

[swiftybird2]

self.productVM.products.chunked(into: 3)をViewmodel内で行い下記のようにしましたが表示できませんでした。

VStack {
ForEach(0..<productVM.productsData.count) { index in
HStack {
ForEach(self.productVM.productsData[index]) { product in
ProductCell(product: product)
}
}
}
}