切换选项卡后 UI 会随 ObservableObject 发生变化

Question

我有一个ObservableObject，用于在从服务器发送新数据时更新我的​​ UI（一个包含自定义结构数组的类）。

由于某种原因，发送数据时，ContentView 的body 被调用，但数据没有改变。我什至添加了一个print 语句来检查数组包含的数据是否正确。

当我尝试切换到 TabView 上的另一个选项卡，然后切换回主视图时，UI确实会更新。有人知道为什么 UI 会在我切换标签时更新，尽管 body 会在数据更改时被召回以更新 UI？

主视图

struct HomeView: View {
    @ObservedObject private var fbData = firebaseData

    var body: some View {
        TabView {
            //Home Tab
            NavigationView {
                ScrollView(showsIndicators: false) {
                    ForEach(self.fbData.posts.indices, id: \.self) { postIndex in
                        PostView(post: self.$fbData.posts[postIndex])
                            .listRowInsets(EdgeInsets())
                            .padding(.vertical, 5)
                    }
                }
                .navigationBarTitle("MyPhotoApp", displayMode: .inline)
                .navigationBarItems(leading:
                    Button(action: {
                        print("Camera btn pressed")
                    }, label: {
                        Image(systemName: "camera")
                            .font(.title)
                    })
                , trailing:
                    Button(action: {
                        print("Messages btn pressed")
                    }, label: {
                        Image(systemName: "paperplane")
                            .font(.title)
                    })
                )
            } . tabItem({
                Image(systemName: "house")
                    .font(.title)
            })

            Text("Search").tabItem {
                Image(systemName: "magnifyingglass")
                    .font(.title)
            }

            Text("Upload").tabItem {
                Image(systemName: "plus.app")
                    .font(.title)
            }

            Text("Activity").tabItem {
                Image(systemName: "heart")
                    .font(.title)
            }

            Text("Profile").tabItem {
                Image(systemName: "person")
                    .font(.title)
            }
        }
        .accentColor(.black)
        .edgesIgnoringSafeArea(.top)
    }
}

FirebaseData：

class FirebaseData : ObservableObject {
    @Published var posts = [Post]()

    let postsCollection = Firestore.firestore().collection("Posts")

    init() {
        self.fetchPosts()
    }

    //MARK: Fetch Data
    private func fetchPosts() {
        self.postsCollection.addSnapshotListener { (documentSnapshot, err) in
            if err != nil {
                print("Error fetching posts: \(err!.localizedDescription)")
                return
            } else {
                documentSnapshot!.documentChanges.forEach { diff in
                    if diff.type == .added {
                        let post = self.createPostFromDocument(document: diff.document)
                        self.posts.append(post)
                    } else if diff.type == .modified {
                        self.posts = self.posts.map { (post) -> Post in
                            if post.id == diff.document.documentID {
                                return self.createPostFromDocument(document: diff.document)
                            } else {
                                return post
                            }
                        }
                    } else if diff.type == .removed {
                        for index in self.posts.indices {
                            if self.posts[index].id == diff.document.documentID {
                                self.posts.remove(at: index)
                            }
                        }
                    }
                }
            }
        }
    }

Answer 1

您的代码示例无助于查找错误。最后我知道了如何演示它。首先，以“正确的方式”进行（复制-粘贴-自己尝试）

import SwiftUI

struct Data: Identifiable {
    let id = UUID()
    let text: String
}
class Model: ObservableObject {
    @Published var data: [Data] = [Data(text: "alfa"), Data(text: "beta")]
 }

struct ContentView: View {
    @ObservedObject var model = Model()
    var body: some View {
        TabView {
            View1(model: model).tabItem {
                Text("View 1")
            }
            View2(model: model).tabItem {
                Text("View 2")
            }
        }
    }
}

struct View1: View {
    @ObservedObject var model: Model
    var body: some View {
        VStack {
            Text("View 1").font(.largeTitle)
            DataView(data: model.data)
            Button(action: {
                self.model.data.append(Data(text: String("ABCDEFGH".shuffled())))
            }) {
                Text("Add random data")
            }
        }
    }
}
struct View2: View {
    @ObservedObject var model: Model
    var body: some View {
        VStack {
            Text("View 2").font(.largeTitle)
            DataView(data: model.data.filter({ (item) -> Bool in
                item.text.count < 4
                }))
                // to distinguish from other DataView !! it seems to be a bug in SwiftUI
                // try to remove it to see the difference
                .id("view2")
            Button(action: {
                self.model.data.append(Data(text: String("ABC".shuffled())))
            }) {
                Text("Add random data")
            }
        }
    }
}

struct DataView: View {
    var data: [Data]
    var body: some View {
        List {
            ForEach(data) { (item) in
                Text(item.text)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我按原样工作，您可以修改每个选项卡中的数据，看到刷新的数据等。

移除“固定 - 用户定义” .id 修饰符，它会显着改变行为

这看起来像是 SwiftUI 中的一个严重错误 ...

Answer 2

我认为是 SwiftUI 错误。我这样解决这个问题。 而不是渲染你的 PostView(post: self.$fbData.posts[postIndex]) 在 ForEach 中实现 post 视图。

ForEach(self.fbData.posts.indices, id: \.self) { postIndex in
   Text(self.$fbData.posts[postIndex].comment)
   Text(self.$fbData.posts[postIndex].date)
   ....
}