自定义UITableViewCell偶尔重叠/覆盖在其他Cell之上的问题

嘿，这个问题我之前做社交APP动态列表时也踩过坑，确实挺棘手的——毕竟UITableView的复用机制遇上异步请求，稍不注意就会出现数据串位、重复请求甚至内存泄漏的问题。下面我分享几个实际用过的解决方案，应该能帮到你：

1. 给Cell绑定请求任务，复用前取消旧请求 #

这是最基础也最必要的一步：每个Cell在发起新请求前，先取消未完成的旧请求，避免旧请求完成后覆盖新Cell的数据。

class AsyncDetailCell: UITableViewCell {
    private var currentRequestTask: URLSessionDataTask?
    @IBOutlet weak var detailLabel: UILabel!
    
    func configure(with item: ListItem) {
        // 先取消之前未完成的请求
        currentRequestTask?.cancel()
        
        // 重置UI状态，避免复用旧数据
        detailLabel.text = "加载中..."
        
        // 发起新请求
        currentRequestTask = URLSession.shared.dataTask(with: item.detailAPI) { [weak self] data, _, error in
            guard let self = self, 
                  error?.code != URLError.cancelled.rawValue, 
                  let data = data else { return }
            
            // 解析数据后回到主线程更新UI
            let detailContent = self.parseDetailData(data)
            DispatchQueue.main.async {
                self.detailLabel.text = detailContent
            }
        }
        currentRequestTask?.resume()
    }
    
    // Cell即将被复用时，再次清理请求和UI
    override func prepareForReuse() {
        super.prepareForReuse()
        currentRequestTask?.cancel()
        currentRequestTask = nil
        detailLabel.text = nil
    }
    
    private func parseDetailData(_ data: Data) -> String {
        // 这里写你的数据解析逻辑
        return "解析后的详情内容"
    }
}

2. 提前预加载数据，减少Cell内的异步请求 #

如果业务允许，尽量在列表数据加载完成后，批量预加载需要额外数据的条目，让Cell在配置时直接用本地数据，从根源上避免Cell内的异步请求。

class ListViewController: UITableViewController {
    private var listItems: [ListItem] = []
    
    func fetchListData() {
        APIManager.fetchListData { [weak self] items in
            guard let self = self else { return }
            self.listItems = items
            self.tableView.reloadData()
            
            // 批量预加载需要详情的条目
            let needDetailItems = items.filter { $0.needsExtraDetail }
            needDetailItems.forEach { item in
                APIManager.fetchDetailData(for: item.id) { detail in
                    if let index = self.listItems.firstIndex(where: { $0.id == item.id }) {
                        self.listItems[index].detail = detail
                        // 只刷新对应的Cell，避免全局reload影响性能
                        self.tableView.reloadRows(at: [IndexPath(row: index, section: 0)], with: .fade)
                    }
                }
            }
        }
    }
}

3. 加入数据缓存，避免重复请求 #

对已经请求过的额外数据进行缓存，这样Cell复用或再次展示时，直接从缓存取数据，不用重复发起网络请求。

// 简单的缓存管理器
class DetailCacheManager {
    static let shared = DetailCacheManager()
    private let cache = NSCache<NSString, NSData>()
    
    func saveDetailData(_ data: Data, forKey key: String) {
        cache.setObject(data as NSData, forKey: key as NSString)
    }
    
    func getDetailData(forKey key: String) -> Data? {
        return cache.object(forKey: key as NSString) as Data?
    }
}

// 在Cell的configure方法中使用缓存
func configure(with item: ListItem) {
    currentRequestTask?.cancel()
    detailLabel.text = "加载中..."
    
    // 先检查缓存
    if let cachedData = DetailCacheManager.shared.getDetailData(forKey: item.id) {
        let detailContent = parseDetailData(cachedData)
        DispatchQueue.main.async {
            self.detailLabel.text = detailContent
        }
        return
    }
    
    // 缓存没有数据时发起请求
    currentRequestTask = URLSession.shared.dataTask(with: item.detailAPI) { [weak self] data, _, error in
        guard let self = self, 
              error?.code != URLError.cancelled.rawValue, 
              let data = data else { return }
        
        // 保存到缓存
        DetailCacheManager.shared.saveDetailData(data, forKey: item.id)
        
        let detailContent = self.parseDetailData(data)
        DispatchQueue.main.async {
            self.detailLabel.text = detailContent
        }
    }
    currentRequestTask?.resume()
}

4. 用ViewModel管理异步状态，解耦Cell逻辑 #

把异步请求的逻辑从Cell中剥离到ViewModel里，让ViewModel负责数据获取、缓存和状态管理，Cell只专注于UI展示，代码更清晰也更易维护。

// 对应条目的ViewModel
class ListItemViewModel {
    let item: ListItem
    var detailContent: String?
    var isLoading: Bool = false {
        didSet {
            stateChangeHandler?()
        }
    }
    var stateChangeHandler: (() -> Void)?
    
    private var currentTask: URLSessionDataTask?
    
    init(item: ListItem) {
        self.item = item
    }
    
    func fetchDetail() {
        guard !isLoading else { return }
        isLoading = true
        
        // 检查缓存
        if let cachedData = DetailCacheManager.shared.getDetailData(forKey: item.id) {
            detailContent = parseDetailData(cachedData)
            isLoading = false
            return
        }
        
        currentTask = URLSession.shared.dataTask(with: item.detailAPI) { [weak self] data, _, error in
            guard let self = self, 
                  error?.code != URLError.cancelled.rawValue, 
                  let data = data else {
                self.isLoading = false
                return
            }
            
            DetailCacheManager.shared.saveDetailData(data, forKey: self.item.id)
            self.detailContent = self.parseDetailData(data)
            self.isLoading = false
        }
        currentTask?.resume()
    }
    
    func cancelRequest() {
        currentTask?.cancel()
        isLoading = false
    }
    
    private func parseDetailData(_ data: Data) -> String {
        // 解析逻辑
        return "解析后的详情"
    }
}

// Cell中使用ViewModel
func configure(with viewModel: ListItemViewModel) {
    self.viewModel = viewModel
    
    // 初始UI展示
    detailLabel.text = viewModel.isLoading ? "加载中..." : viewModel.detailContent ?? "暂无数据"
    
    // 监听状态变化更新UI
    viewModel.stateChangeHandler = { [weak self] in
        DispatchQueue.main.async {
            self?.detailLabel.text = viewModel.isLoading ? "加载中..." : viewModel.detailContent ?? "加载失败"
        }
    }
    
    // 未加载过详情时发起请求
    if viewModel.detailContent == nil && !viewModel.isLoading {
        viewModel.fetchDetail()
    }
}

override func prepareForReuse() {
    super.prepareForReuse()
    viewModel?.cancelRequest()
    viewModel = nil
    detailLabel.text = nil
}

这些方案可以根据你的业务场景组合使用，比如预加载+缓存+请求取消的组合，能最大程度避免数据串位、重复请求等问题。

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