SwiftUI接入REST API后仅显示空白画布问题求助

1. 检查ViewModel的属性修饰符 #

确保存储API返回数据的属性添加@Published，这样数据变化时才能自动通知视图刷新；同时API请求完成后，必须回到主队列更新UI：

class YourViewModel: ObservableObject {
    @Published var carouselItems: [YourModel] = []

    func fetchData() {
        URLSession.shared.dataTask(with: yourAPIUrl) { data, _, error in
            guard let data = data else { return }
            DispatchQueue.main.async {
                do {
                    self.carouselItems = try JSONDecoder().decode([YourModel].self, from: data)
                } catch {
                    print(error)
                }
            }
        }.resume()
    }
}

2. 确认视图正确绑定ViewModel #

在视图中必须用@StateObject（首次初始化时）或@ObservedObject（父视图传递时）持有ViewModel实例，否则无法监听数据变化：

struct CarouselView: View {
    @StateObject private var viewModel = YourViewModel()

    var body: some View {
        TabView {
            ForEach(viewModel.carouselItems) { item in
                Text(item.title) // 确保调用模型的正确属性
            }
        }
        .tabViewStyle(.page)
        .onAppear {
            viewModel.fetchData()
        }
    }
}

3. 处理数据加载状态 #

数据请求未完成或加载失败时，添加占位视图避免空白：

var body: some View {
    Group {
        if viewModel.carouselItems.isEmpty {
            ProgressView("加载中...")
        } else {
            TabView {
                ForEach(viewModel.carouselItems) { item in
                    // 轮播内容组件
                }
            }
            .tabViewStyle(.page)
        }
    }
    .onAppear {
        viewModel.fetchData()
    }
}

4. 验证ForEach的标识合法性 #

如果数据模型未遵循Identifiable协议，必须在ForEach中显式指定id参数：

// 推荐方式：让模型遵循Identifiable
struct YourModel: Codable, Identifiable {
    let id: Int
    let title: String
    // 其他属性
}

// 或者手动指定id
ForEach(viewModel.carouselItems, id: \.id) { item in
    Text(item.title)
}

5. 检查数据请求触发时机 #

如果Carousel嵌套在NavigationView、TabView等容器中，.onAppear可能不会立即触发，可以改用.task修饰符发起请求（需配合异步/await写法）：

// ViewModel中改用异步方法
func fetchData() async {
    do {
        let (data, _) = try await URLSession.shared.data(from: yourAPIUrl)
        self.carouselItems = try JSONDecoder().decode([YourModel].self, from: data)
    } catch {
        print(error)
    }
}

// 视图中用task触发
.task {
    await viewModel.fetchData()
}

内容的提问来源于stack exchange，提问作者bushra