如何在jetpack compose文本视图[重复]中显示Firestore集合文档中的文档字段

Question

如果我违反了一些规则，或者之前有人问过我，我很抱歉。我花了很多时间在谷歌上搜索示例，以及有关堆栈溢出和其他资源的问题。但我无法理解如何从firestore集合中获取文档字段，并在jetpack compose文本函数中显示字符串值。

我是编程和Android的初学者。所以我有一些基本的误解，我应该怎么做，但这是我的尝试，它不起作用，我不明白为什么。

在FiRecovery中，我有一个集合，称为用户，其中包含一个名为holidaySavings的文档，其中有一个名为name的字符串字段。

我想在可组合的文本函数中显示name的值。

我有一个名为storedData的类来处理Firestore。它具有创建和更新集合/文档/字段的方法。这很有效。

但我似乎无法从文档中读取字段值到jetpack可组合文本。

我可以从一个文档字段读取值，并在Android studio中读取日志。

这是我在类中处理Firestore数据库的函数

fun readDataTestFinal(): String{
        val docRef = db.collection("users").document("holidaySavings")
        var returnTest = ""
        docRef.get()
            .addOnSuccessListener { document ->
                if (document != null) {
                    Log.d("Rtest", "DocumentSnapshot data: ${document.data}")

                    // I want to return this so I can use it in a composable text view
                    returnTest = document.get("name").toString()
                } else {
                    Log.d("Rtest", "No such document")
                }
            }
            .addOnFailureListener {  exception ->
                Log.d("Rfail", "get failed with ", exception)
            }
        return returnTest
    }

在这里，我尝试将值读入jetpack compose文本函数。

var newStringFromStoredData by remember {
                mutableStateOf(storedData().readDataTestFinal())
            }
            Text(
                modifier = Modifier.background(color = Color.Blue),
                text = newStringFromStoredData
            )

当我运行应用程序时。一切都编译得很好，我从文档字段fine中获得值，并可以在Android Studio的日志中看到它。

但是Compose函数在其中调用值newStringFromStoredData的Text它没有显示在屏幕上？

有谁能告诉我我不了解的是什么，以及如何使用firestore文档字段并在jetpack compose文本函数中显示值？

Answer 1

在您的情况下，最方便、最快捷、显然也是最好的补丁是使用所谓的valueEventListeners。

Firebase为您提供了这些有用的方法，以便您可以通过Firebase服务器使您的应用程序数据保持最新。

val docRef = db.collection("cities").document("SF")
docRef.addSnapshotListener { snapshot, e -> // e is for error

    // If error occurs
    if (e != null) {
        Log.w(TAG, "Listen failed.", e)
        return@addSnapshotListener
    }
    
    // If backend value not received, use this to get current local stored value
    val source = if (snapshot != null && snapshot.metadata.hasPendingWrites())
        "Local"
    else
        "Server"
    
    // If request was successful, 
    if (snapshot != null && snapshot.exists()) {
        Log.d(TAG, "$source data: ${snapshot.data}")
        //Update your text variable here
        newStringFromStoredData = snapshot.data // Might need type-conversion
    } else {
        Log.d(TAG, "$source data: null")
    }
}

这不仅可以解决问题中所述的问题，还可以确保每当服务器上的值发生更改/更新时，文本都会随之更新。使用这些监听器通常是一个很好的最佳实践，为了遵守“关注点分离”原则，这些监听器通常被转换为LiveData对象，但您可以将这个简单的实现用于所描述的简单用例。

另一件事，这通常会出现在viewModel中，因此，您也应该在viewModel中声明您的文本变量。在初始化块中尝试。

calss MVVM: ViewModel() {
  init {
    /* Paste Code From Above Here */
  }

  var newStringFromStoredData by mutableStateOf("") 

}

然后在Composable中阅读

<代码>文本（viewModel.newStringFromStoredData）

Answer 2

Firebase调用是异步的，这意味着它不会立即返回数据。这就是API使用回调的原因。因此，您的函数readDataTestFinal总是返回一个空字符串。

您可以使用的一种解决方案是在一个挂起函数中转换您的函数，并使用协同路由范围调用它。例如：

suspend fun readDataTestFinal(): String {
    val docRef = firestore.collection("users")
        .document("holidaySavings")
    return suspendCoroutine { continuation ->
        docRef.get()
            .addOnSuccessListener { document ->
                if (document != null) {
                    continuation.resume(document.get("name").toString())
                } else {
                    continuation.resume("No such document")
                }
            }
            .addOnFailureListener { exception ->
                continuation.resumeWithException(exception)
            }
    }
}

在上面的代码中，我们将回调调用转换为挂起函数。

在composable中，可以执行以下操作：

var newStringFromStoredData by remember {
    mutableStateOf("")
}
Text(newStringFromStoredData)

LaunchedEffect(newStringFromStoredData) {
    newStringFromStoredData =
        try { readDataTestFinal() } catch(e: Exception) { "Error!" }
}

LaunchedEffect将启动挂起功能，并在加载后立即更新结果。

一个更好的选择是在视图模型中定义这个调用并从中调用这个函数。但我认为这回答了您的问题，您可以稍后改进您的架构。您可以从这里开始。