Swift网络请求中如何将用户数据存入数组并展示？

核心调整方向 #

你需要把存储用户数据的变量改成可被UI监听的数组，并在获取单个用户数据时将其追加到数组中，而非覆盖单个变量。

1. 修改NetworkModel的属性定义 #

把原有的单个userData变量替换为@Published修饰的数组，确保UI能感知数组变化：

import Foundation

@MainActor
class NetworkModel: ObservableObject {
    
    @Published var listId: [String] = []
    var statusList = ""
    var statusUser = ""
    var temp = ""
    @Published var users: [UserData] = []  // 改成@Published数组，用于UI展示
    // 单个userData变量若无需保留可删除，如需临时查看单条数据可保留
}

2. 修改getUser函数，将数据追加到数组 #

原函数每次会覆盖单个用户数据，现在调整为将解码后的UserData添加到数组：

func getUser(url: String) {
    guard let url = URL(string: "https://opn-interview-service.nn.r.appspot.com/get/\(url)") else { fatalError("Missing URL") }
    var request = URLRequest(url: url)
    request.addValue("bearer \(token)", forHTTPHeaderField: "Authorization")
    let dataTask = URLSession.shared.dataTask(with: request) { (data, response, error) in
        if let error = error {
            print("Request error", error)
            return
        }
        guard let response = response as? HTTPURLResponse else { return }
        if response.statusCode == 200 {
            guard let data = data else { return }
            DispatchQueue.main.async { [self] in
                do {
                    let decoded = try JSONDecoder().decode(UserRespons.self, from: data)
                    self.statusUser = decoded.status
                    // 将解码后的用户数据追加到数组
                    self.users.append(decoded.data)
                    print("UserData added: name = \(decoded.data.firstName) Lastname = \(decoded.data.lastName) gender = \(decoded.data.gender)")
                } catch let error{
                    print("Error decode", error)
                }
            }
        }
    }
    dataTask.resume()
}

3. 优化getList函数（可选） #

为避免重复加载导致数组堆积数据，可在请求列表前清空数组：

func getList() {
    guard let url = URL(string: "https://opn-interview-service.nn.r.appspot.com/list") else { fatalError("Missing URL") }
    var request = URLRequest(url: url)
    request.addValue("bearer \(token)", forHTTPHeaderField: "Authorization")
    let dataTask = URLSession.shared.dataTask(with: request) { (data, response, error) in
        if let error = error {
            print("Request error", error)
            return
        }
        guard let response = response as? HTTPURLResponse else { return }
        if response.statusCode == 200 {
            guard let data = data else { return }
            DispatchQueue.main.async { [self] in
                do {
                    let decoded = try JSONDecoder().decode(DataRespons.self, from: data)
                    self.listId = decoded.data
                    self.statusList = decoded.status
                    
                    // 清空数组，避免重复数据
                    self.users.removeAll()
                    
                    for userId in self.listId {
                        print("This is id = \(userId)")
                        getUser(url: userId)
                    }
                } catch let error{
                    print("Error decode", error)
                }
            }
        }
    }
    dataTask.resume()
}

4. 在SwiftUI视图中展示数组数据 #

利用@StateObject绑定模型，通过List遍历数组展示内容：

struct UserListView: View {
    @StateObject var networkModel = NetworkModel()
    
    var body: some View {
        List(networkModel.users) { user in
            VStack(alignment: .leading) {
                Text("\(user.firstName) \(user.lastName)")
                    .font(.headline)
                Text("Age: \(user.age) | Country: \(user.country)")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
        .onAppear {
            networkModel.getList()
        }
    }
}

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