SwiftUI中UITableView数据更新异常问题求助

问题描述 #

在SwiftUI中使用UITableView展示WebSocket实时数据时，出现以下异常：

• 数据源tableViewData顺序正确，但单元格显示的内容顺序随机错乱；
• 调试cellForRowAt时能获取对应IndexPath的正确数据，但单元格最终显示的内容不匹配。

核心原因 #

单元格复用逻辑错误：复用单元格时，仅替换HostingCell的host属性，但未移除旧的UIHostingController视图，导致旧的SwiftUI视图被保留在单元格中，新视图无法正确替换显示内容。此外，ViewModel中存在重复的数据流订阅，可能引发不必要的重复更新。

解决方法 #

1. 重构HostingCell，支持视图动态替换 #

修改HostingCell，利用didSet属性观察器，在更新host时自动移除旧视图并添加新视图：

class HostingCell: UITableViewCell {
    var host: UIHostingController<AnyView>? {
        didSet {
            // 移除旧的宿主视图
            oldValue?.view.removeFromSuperview()
            guard let newHostView = host?.view else { return }
            
            newHostView.translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(newHostView)
            
            // 设置约束
            NSLayoutConstraint.activate([
                newHostView.topAnchor.constraint(equalTo: contentView.topAnchor),
                newHostView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
                newHostView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
                newHostView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
            ])
        }
    }
}

2. 简化cellForRowAt逻辑 #

移除原有的条件判断，直接更新HostingCell的host属性，让didSet自动处理视图替换：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let tableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! HostingCell
    tableViewCell.backgroundColor = .clear
    
    let row = parent.tableViewData[indexPath.row]
    // 直接创建并赋值新的HostingController
    tableViewCell.host = UIHostingController(
        rootView: AnyView(
            QuotesCellView(item: row, selectAction: self.parent.selectClicked)
        )
    )
    tableViewCell.host?.view.backgroundColor = .clear
    
    return tableViewCell
}

3. 清理ViewModel中的重复订阅 #

移除ViewModel中重复的socket.$symbolsList订阅，避免不必要的重复赋值：

func observeSocketValues() {
    socket.$symbolsList.sink(receiveValue: { newSymbols in
        self.list = newSymbols
    })
    .store(in: &cancellables)
    
    // 删除原有的重复订阅代码
}

额外优化建议 #

• 避免每次数据更新都调用reloadData()，可以通过对比新旧数据源的差异，使用insertRows(at:with:)、deleteRows(at:with:)等方法进行局部更新，提升性能；
• 确保SymbolsInDataModel实现Equatable协议，方便对比数据变化。

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