尝试从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中，然后为外部容器(例如Group(调用.onAppear方法，则一切都将正常工作，并且不会出现超出范围的索引错误。

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
}
}
}
}