尝试从API数组制作页面选项卡视图时获取超出范围索引错误

Question

这是我的模型：

class Api {
    func getRockets(completion: @escaping ([Rocket]) -> ()) {
        guard let url = URL(string: "https://api.spacexdata.com/v4/rockets") else { return }
        
        URLSession.shared.dataTask(with: url) { (data, response, error) in
            do {
                let rockets = try JSONDecoder().decode([Rocket].self, from: data!)
                
                DispatchQueue.main.async {
                    completion(rockets)
                }
            } catch {
                print(error.localizedDescription)
            }
        }
        .resume()
    }
}

我尝试使用 API 数组中的元素制作 PageTabView，但我的应用程序因超出范围索引错误而崩溃。

这是无法正常工作的视图：

struct TestTabViewView: View {
    @State var rockets: [Rocket] = [] //<-- The array of items from the API I use to make tabs
    
    var body: some View {
        TabView {
            ForEach(rockets) { rocket in
                Text(rocket.name)
            }
        }
        .onAppear {
            Api().getRockets { rockets in
                self.rockets = rockets
            }
        }
        .tabViewStyle(.page)
    }
}

struct TestTabViewView_Previews: PreviewProvider {
    static var previews: some View {
        TestTabViewView()
    }
}

Answer 1

如果将TabView放入IF-ELSE语句中，然后将此语句放入navigationView或group中，然后调用> 。

struct TestTabViewView: View {
    @State var rockets: [Rocket] = []
    
    var body: some View {
        Group {
            if rockets.isEmpty {
                ProgressView()
            } else {
                TabView {
                    ForEach(rockets) { rocket in
                        Text(rocket.name)
                    }
                }
                .tabViewStyle(.page)
            }
        }
        .onAppear {
            Api().getRockets { rockets in
                self.rockets = rockets
            }
        }
    }
}