ObservableObject loading all items in ForEach with same data - swift

Question

I have a LazyVStack ForEach looping through metadata passed into the view. Each item has it's own button displayed in the loop.
On button tap, it should load additional API data and display it within the ForEach item via RichText views.
Right now on button tap, it's loading and displaying the same additional data for all items in the loop.
Am I missing something about creating unique, dynamic items in the loop?
struct PostDetail: View {
#State var postDetail: Post
#StateObject var chapterLoader = ChapterLoaderApi()
var body: some View {
ScrollView(showsIndicators: false) {
LazyVStack {
ForEach(postDetail.chapters) { item in
Button(action: {
Task {
await chapterLoader.fetchChapter(currentItem: item)
}
}, label: {
Rectangle()
.frame(width: 200, height: 100)
.foregroundColor(.blue)
})
switch chapterLoader.state {
case .idle: EmptyView()
case .loading: ProgressView()
case .loaded(let html):
RichText(html: html.renderedContent)
.lineHeight(170)
.imageRadius(6)
.fontType(.system)
case .failed(let error):
Text(error.localizedDescription)
}
}
}
}
}
}
#MainActor class ChapterLoaderApi: ObservableObject {
enum LoadingState {
case idle
case loading
case loaded(Chapter)
case failed(Error)
}
#Published var state: LoadingState = .idle
func fetchChapter(currentItem item: ChapterMeta) async {
self.state = .loading
do {
let response = try await getChapter(id: item.id)
self.state = .loaded(response)
} catch {
state = .failed(error)
}
}
}

Answer 1

You're using the same instance of chapterLoader to load details for any item in the list and in turn the ChapterLoader class can only communicate the state of a last requested item.
Here's what happens:
You press a button of a certain list item.
The button press triggers chapterLoader.fetchChapter for this item.
ChapterLoader mutates its state upon loading the data.
Because state is #Published, SwiftUI understands that it's time to re-render the view entirely.
SwiftUI re-renders each row in a list. For each row, it checks for chapterLoader.state which contains the data for just one item that was requested. SwiftUI displays this data for the item in a RichText.
The simplest solution would be to make ChapterLoader return a state for a particular item, not just a state of a last requested item, that will solve your issue. There are other ways of course and I hope that having understood what's happening you'll be able to figure out the best way to fix it.