chatView 中的重复消息。如何清除视图？

Question

我有一个带有 chatRow 视图（消息）列表的 chatView
每个 chatView 都有一个带有 firebase 的快照侦听器，所以如果我向对话添加新消息，我应该会得到实时更新

我遇到的问题是：当我添加一条新消息时，我的 chatView 会显示我之前添加的所有消息以及新消息，再加上相同的列表....如果我添加另一条消息，则列表会再次重复

我假设我需要 drop/refresh Foreach 循环中显示的先前视图...我怎样才能 drop/refresh 视图以便它可以接收刷新的非重复数据？

struct ChatView: View {
    
    @EnvironmentObject var chatModel: ChatsViewModel
    
    let chat: Conversation
    let user = UserService.shared.user
    @State var messagesSnapshot = [Message]()
    
    @State var newMessageInput = ""
    
    var body: some View {
        NavigationView {
            VStack {
                ScrollViewReader { scrollView in
                    ScrollView {
                        
                        ForEach(chat.messages, id: \.id) { message in
                            if user.name == message.createdBy {
                                ChatRow(message: message, isMe: true)
                            } else {
                                ChatRow(message: message, isMe: false)
                            }
                        }
                        .onAppear(perform: {scrollView.scrollTo(chat.messages.count-1)})
                    }
                    
                }
                Spacer()
                
                //send a new message
                ZStack {
                    Rectangle()
                        .foregroundColor(.white)
                    
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color("LightGrayColor"), lineWidth: 2)
                        .padding()
                    
                    HStack {
                        TextField("New message...", text: $newMessageInput, onCommit: {
                            print("Send Message")
                        })
                        .padding(30)
                        
                        Button(action: {
                            chatModel.sendMessageChat(newMessageInput, in: chat, chatid: chat.id ?? "")
                            print("Send message.")
                        }) {
                            Image(systemName: "paperplane")
                                .imageScale(.large)
                                .padding(30)
                        }
                    }
                }
                .frame(height: 70)
            }
            .navigationTitle("Chat")
        }
        
    }
}

向对话添加消息的功能

func addMessagesToConv(conversation: Conversation, index: Int) {
        var mensajesTotal = [Message]()
        
        let ref = self.db.collection("conversations").document(conversation.id!).collection("messages")
            .order(by: "date")
            .addSnapshotListener { querySnapshotmsg, error in
            
            if error == nil {
                //loop throug the messages/docs
                for msgDoc in querySnapshotmsg!.documents {
                    var m = Message() //emtpy struc message
                    m.createdBy = msgDoc["created_by"] as? String ?? ""
                    m.date = msgDoc["date"] as? Timestamp ?? Timestamp()
                    m.msg = msgDoc["msg"] as? String ?? ""
                    m.id = msgDoc.documentID //firebase auto id
                    
                    mensajesTotal.append(m) //append this message to the total of messages
                    self.chats[index].messages.removeAll()
                    self.chats[index].messages = mensajesTotal
                }
            } else {
                print("error: \(error!.localizedDescription)")
            }
        }
    }

Answer 1

您已经在 mensajesTotal 外部定义了快照侦听器。所以，它每次都会被追加。

要解决此问题，请移动此行：

var mensajesTotal = [Message]()

到 addSnapshotListener 闭包内部。

Answer 2

您有两个选择：

每次从数据库获取更新时清除mensajesTotal，如@jnpdx 的所示。
在 querySnapshotmsg.documentChanges to perform increment updates in your UI, as also shown in the documentation on detecting changes between snapshots 中处理更精细的更新。

这些方法在客户端和服务器之间传输的数据没有区别，因此请使用最简单的方法（通常是 #1）或 UI 上最有效的方法（通常是 #2 ).

chatView 中的重复消息。如何清除视图？

Repeated messages in chatView. how to clear view?

firebase

google-cloud-firestore

swiftui

swiftui-list