SwiftUI List渲染需指定数组下标才能显示内容，该如何解决？

问题根因 #

你要遍历的书签列表实际存储在接口返回的ObjectResponse对象的objects属性中，但你目前把整个ObjectResponse包装成单元素数组存入了ViewModel的items中，导致List遍历的层级错误，必须手动加下标才能拿到单个书签数据。

修改方案 #

1. 调整ViewModel代码

把存储的数组类型改为你实际需要遍历的[Object]，请求成功后直接把响应里的objects数组赋值即可：

class ContentViewModel: ObservableObject {
    // 存储实际要渲染的书签数组，类型为[Object]
    @Published var items: [Object] = []
    func fetchData() {
        let api = "https://api.cosmicjs.com/v2/buckets/a5e294b0-55ee-11ec-942e-ef0a04148eb7/objects?pretty=true&query=%7B%22type%22%3A%22bookmarks%22%7D&read_key=fufvo5ceSy1W88afkchDIRjYrUIzErPw9YzcW2vQV1SxKqjNHo&limit=20&props=slug,title,content,metadata,"
        
        guard let url = URL(string: api) else { return }
        
        URLSession.shared.dataTask(with: url) { (data, response, error) in
            do {
                if let data = data {
                    let result = try JSONDecoder().decode(ObjectResponse.self, from: data)
                    DispatchQueue.main.async {
                        // 直接把响应里的书签数组赋值给items
                        self.items = result.objects
                    }
                } else {
                    print("No data")
                }
            } catch (let error) {
                print(error)
            }
        }.resume()
    }
}

2. 调整ContentView代码

现在List遍历的就是所有书签对象，直接取对应属性即可，不需要加下标：

struct ContentView: View {
    @ObservedObject var viewModel = ContentViewModel()
    
    var body: some View {
        NavigationView {
            List(viewModel.items, id: \.self) { item in
                VStack(alignment: .leading) {
                    Text(item.title)
                    // 还可以直接取其他属性，比如发布时间
                    Text(item.metadata.published)
                        .font(.caption)
                        .foregroundColor(.gray)
                }
            }
            .navigationTitle("Bookmarks")
        }
        .onAppear(perform: {
            viewModel.fetchData()
        })
    }
}

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