SwiftUI聊天室开发问题：StateObject警告与消息不显示

你遇到的问题根源是在View的init方法中提前访问了@StateObject属性。SwiftUI要求@StateObject必须在View被系统正确挂载到视图树后才能被访问，过早访问会导致创建多个独立的ChatMessageList实例——你在socket回调里操作的实例，和绑定到List上渲染UI的实例根本不是同一个，所以消息添加后UI完全没反应，同时触发终端警告。

1. 延迟Socket回调的注册 #

把addHandlers()的调用从init中移到View的生命周期方法里，确保View已经挂载、@StateObject实例被正确初始化后再设置socket监听：

修改MessageView的body部分，在最外层VStack后添加.onAppear：

var body: some View {
    VStack {
        // 原有UI代码保持不变
    }
    .onAppear {
        self.addHandlers()
    }
}

同时删除init方法里的self.addHandlers()调用。

2. 简化ObservableObject实现 #

@Published属性会自动发送objectWillChange通知，不需要手动调用，直接删掉ChatMessageList里的冗余代码：

class ChatMessageList: ObservableObject {
    @Published var list: [ChatMessage]
    
    init(list: [ChatMessage]) {
        self.list = list
    }
    
    func addItem(item: ChatMessage) {
        list.append(item)
        // 移除这一行：objectWillChange.send()
    }
}

3. 增加类型转换安全性 #

socket回调里的强制类型转换as!容易导致崩溃，换成安全的解包方式：

func addHandlers() {
    self.socket.on("chat message") { data, ack in
        guard let messageText = data[0] as? String else { return }
        let newMessage = ChatMessage(message: messageText, MatchImg: "ye", isMe: false)
        self.addMessage(message: newMessage)
    }
}

修改后的MessageView核心部分：

struct MessageView: View {
    @State private var showMenu: Bool = false
    @StateObject var messages = ChatMessageList(list: [
        ChatMessage(message: "Hello world", MatchImg:"ye",isMe: true),
        ChatMessage(message: "Hello world", MatchImg:"ye",isMe: false)
    ])
    
    @State private var composedMessage: String = ""
    let roomID: String
    let userID: String
    let otherUser: String
    
    private var socket: SocketIOClient
    private var manager: SocketManager
    
    init(roomID: String, userID: String, otherUser: String) {
        self.roomID = roomID
        self.userID = userID
        self.otherUser = otherUser
        
        self.manager = SocketManager(socketURL: URL(string: "http://localhost:8080")!, config: [.log(false), .compress])
        self.socket = self.manager.defaultSocket
        
        self.socket.connect()
        // 移除这里的addHandlers()调用
    }

    func addHandlers() {
        self.socket.on("chat message") { data, ack in
            guard let messageText = data[0] as? String else { return }
            let newMessage = ChatMessage(message: messageText, MatchImg: "ye", isMe: false)
            self.addMessage(message: newMessage)
        }
    }
    
    func addMessage(message: ChatMessage) {
        DispatchQueue.main.async {
            self.messages.addItem(item: message)
        }
    }
    
    var body: some View {
        VStack {
            // 原有UI代码保持不变
        }
        .onAppear {
            self.addHandlers()
        }
        .task{
            print(self.socket.status)
            self.socket.emit("identify", userID)
            self.socket.emit("subscribe", roomID, otherUser)
        }
    }
}

可以把Socket相关的逻辑单独封装到一个ObservableObject类中，让MessageView只负责UI展示，代码会更清晰易维护。

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