如何过滤从 Ticketmaster API 收到的图像？

Question

我的应用程序中有“小部件”，我将其用作特色滚动视图的按钮。我遇到的问题是，当我从 api 调用图像时，它会按照我想要的方式显示它们，但它会在显示新图像之前多次重复同一图像。我想要每个小部件都有不同的图像。

import SwiftUI
import SDWebImageSwiftUI

struct HomeViewWidget: View {
    var event: Event 
    
    var body: some View {
        VStack {
            if let imageUrl = event.images?.first?.url {
                ZStack(alignment: .bottomLeading) {
                    WebImage(url: URL(string: imageUrl))
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 250, height: 250)
                        .clipped()
                        .cornerRadius(10)

这是我的实际小部件。

这是我调用我的小部件的视图。

import SwiftUI

struct HomePageView: View {
    @EnvironmentObject var userSettings: UserSettings
    @State private var events: [Event] = []
    
    var body: some View {
        NavigationView {
            VStack {
                SearchBarView().padding()
                
                HStack {
                    Text("Featured")
                        .font(.headline)
                        .fontWeight(.heavy)
                        .padding() 
                    Spacer()
                }
                
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 20) {
                        ForEach(events, id: \.id) { event in
                            HomeViewWidget(event: event)
                        }
                    }
                    .padding(.horizontal)
                }
                
                Spacer()
            }
            .navigationBarTitle("Explore Events", displayMode: .inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    VStack {
                        HStack {
                            Text("Welcome \(userSettings.profile.name)")
                                .font(.subheadline)
                            Spacer()
                        }
                        HStack {
                            Text("Explore events")
                                .font(.largeTitle)
                                .fontWeight(.heavy)
                            Spacer()
                        }
                    }
                }
            }
            .navigationBarBackButtonHidden(true)
            .onAppear {
                loadEvents()
            }
        }
    }
    
    
    private func loadEvents() {
        Task {
            do {
                let loadedEvents = try await fetchTMEvents() ?? []  // Fetch events
                let uniqueEvents = Array(Set(loadedEvents)).sorted { $0.name < $1.name }  // Remove duplicates and sort
                let limitedEvents = Array(uniqueEvents.prefix(3))  // Limit to 5 events for display

                DispatchQueue.main.async {
                    self.events = limitedEvents  // Update UI with limited number of events
                    limitedEvents.forEach { event in
                        print("Unique Event Displayed: \(event.name), ID: \(event.id)")
                    }
                }
            } catch {
                DispatchQueue.main.async {
                    print("Failed to load events: \(error)")
                }
            }
        }
    }
}

struct HomePageView_Previews: PreviewProvider {
    static var previews: some View {
        HomePageView().environmentObject(UserSettings())
    }
}

private func uniqueEvents(from events: [Event]) -> [Event] {
    var uniqueIds = Set<String>()
    return events.filter { uniqueIds.insert($0.id).inserted }
}

这是我一直试图用来过滤图像的数据：

struct Event: Codable, Identifiable {
    let name, type, id, url, locale: String
    let images: [EventImage]?
}

extension Event: Hashable {
    static func == (lhs: Event, rhs: Event) -> Bool {
        return lhs.id == rhs.id
    }
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
}

Answer 1

      .task {
            await loadEvents()
       }
    }
    
    
    private func loadEvents() async {
            do {
                let loadedEvents = try await fetchTMEvents() ?? []  // Fetch events
                let uniqueEvents = Array(Set(loadedEvents)).sorted { $0.name < $1.name }  // Remove duplicates and sort
                let limitedEvents = Array(uniqueEvents.prefix(3))  // Limit to 5 events for display

                    self.events = limitedEvents  // Update UI with limited number of events
                    limitedEvents.forEach { event in
                        print("Unique Event Displayed: \(event.name), ID: \(event.id)")
                    }
                
            } catch {
                    print("Failed to load events: \(error)")
                
            }
        }
    }

extension Event: Hashable {
    static func == (lhs: Event, rhs: Event) -> Bool {
        return lhs.id == rhs.id && lhs.url == rhs.url && lhs.name == rhs.name && everything else...
    }