为什么我的 TableView 只显示每个单元格中加载的最后一张图片？ （迅速）

Question

我目前遇到的问题是在 tableView 单元格中正确显示图像。我的图像已保存到 Firebase，我可以轻松检索这两个图像。

当我尝试在其自己的表格视图单元格中显示每个图像时，它们会快速加载两个图像，最终结果是最后一个图像显示在两个单元格中，而不是两个不同的图像。

我认为问题在于我的 cellForRowAt IndexPath 或我如何从 Firebase 调用数据。

这是我的主 TableView 视图控制器

import UIKit
import Firebase
import FirebaseStorage
import FirebaseDatabase

class CardDesignViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!
//passing a value to another page with thie var
var IdvalueTitle = ""
var db:Firestore!
//PropertiesCell2 is pointing to a swift file containing my dictionary for the outlets
var propertiesArray3 = [PropertiesCell2]()

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.delegate = self
    tableView.dataSource = self


extension CardDesignViewController: UITableViewDataSource, UITableViewDelegate {


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return propertiesArray3.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let spot = propertiesArray3[indexPath.row]
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableView2") as! TableView2


    cell.app? = "\(spot.templateOption)"

    cell.IDvalueHidden?.text = "\(spot.IDvalueHidden)"
    cell.templateOption.layer.cornerRadius = 12
    cell.templateOption.layer.masksToBounds = true

    return cell

}

我已将单元格的出口放入一个名为“TableView2”的文件中。这是我在名为 getTemplates() 的函数中调用来自 Firebase 的图像数据的地方，并在“var app: String!”中使用它

import Foundation
import UIKit
import Firebase
import FirebaseDatabase
import FirebaseStorage

class TableView2: UITableViewCell {

@IBOutlet weak var templateOption: UIImageView!
@IBOutlet weak var IDvalueHidden: UILabel!

func  styleTheCells2(cells: Cell2) {

    templateOption.image = cells.templateOption
    IDvalueHidden.text = cells.IDvalueHidden
}
var app: String! {
    didSet {
        self.getTemplates()
    }
}
func getTemplates() {

    let db = Firestore.firestore()

    db.collection("Card Templates").getDocuments { (snapshot, err) in
        if err != nil {
            return
        } else {
            for document in (snapshot?.documents)! {
                if let picURL = document.data()["Template"] as? String {
                    let url = URL(string: picURL)
                    print(picURL)
                    DispatchQueue.global().async {
                        do{
                            let data = try Data(contentsOf: url!)
                            DispatchQueue.main.async {
                                self.templateOption.image = UIImage(data: data)
                            }
                        } catch {
                        }
                    }
                }
            }
        }
    }
}

当我运行此代码时，我还附上了一张最终结果的图片。但是，我在两个单元格中都得到了相同的图像，当我查看调试区域时，我可以看到两个图像都被访问了两次。

这是我运行此代码时的模拟器。我希望在单元格中有两个不同的图像，而不是两个图像：

我的调试器显示两个图像 url 被连续拉出两次，最后一个被拉出的图像（绿色图像）显示在两个单元格中：

Answer 1

每次通过 getTemplates() 函数呈现 UITableViewCell 时，您都会从 Firebase 存储中获取图像

由于您在 Firebase 中有 2 个图像，我假设“propertiesArray3”中有 2 个元素。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return propertiesArray3.count
}

每次它通过 Firebase 并打印出数据库中的所有 URL。由于 numberOfRowsInSection 为 2，图像 URL 被打印两次。

for循环每次都在最后一个元素结束，并将最后一个URL设置为图片。

func getTemplates() {

let db = Firestore.firestore()

db.collection("Card Templates").getDocuments { (snapshot, err) in
    if err != nil {
        return
    } else {
        for document in (snapshot?.documents)! {
            if let picURL = document.data()["Template"] as? String {
                let url = URL(string: picURL)
                print(picURL)
                DispatchQueue.global().async {
                    do{
                        let data = try Data(contentsOf: url!)
                        DispatchQueue.main.async {
                            self.templateOption.image = UIImage(data: data)
                        }
                    } catch {
                    }
                }
            }
        }
    }
}

希望对你有帮助

对于开始的基本方法，您可以尝试这样的方法 - 声明一个数组来存储 URL

var urlArray: [URL] = []

在 viewDidLoad() 中获取 URL

let db = Firestore.firestore()
db.collection("Card Templates").getDocuments { (snapshot, err) in
    if err != nil {
        return
    } else {
        for document in (snapshot?.documents)! {

            if let picURL = document.data()["Template"] as? String {
                let url = URL(string: picURL)
                // ADD ALL THE URLs TO THE NEW ARRAY
                urlArray.append(url)                    
            }
        }
        tableView.reloadData()
    }
}

从 UITableViewCell 中移除 getTemplates()

编辑 tableView 委托

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return urlArray.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let spot = propertiesArray3[indexPath.row]
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableView2") as! TableView2

    let url = urlArray[indexPath.row]
    do{
        let data = try Data(contentsOf: url!)
        DispatchQueue.main.async {
            cell.templateOption.image = UIImage(data: data)
        }
      } catch {
      }


    cell.app? = "\(spot.templateOption)"

    cell.IDvalueHidden?.text = "\(spot.IDvalueHidden)"
    cell.templateOption.layer.cornerRadius = 12
    cell.templateOption.layer.masksToBounds = true

    return cell

} 

Answer 2

prepareForReuse 函数中最清晰的基于内容的单元格视图

override func prepareForReuse() {
        super.prepareForReuse()

        // remove image from imageView
        templateOption.image = nil
    }