使用Jetpack Compose加载数据的一个常见错误（Compose死循环）

最新推荐文章于 2025-03-24 14:33:10 发布

tq1086

最新推荐文章于 2025-03-24 14:33:10 发布

阅读量339

点赞数

文章标签： Android

本文链接：https://blog.youkuaiyun.com/tq1086/article/details/134342658

版权

本文讲述了在使用JetpackCompose和Flow加载数据时，如何避免常见的错误，如无限循环，并介绍了如何正确地在ViewModel和LaunchedEffect中管理数据获取。特别关注了`collectAsState`和在函数式编程中的正确用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：Jetpack Compose Load Data (Flow.collectAsState) Common Mistakes (Compose Infinite Loop)
原文地址：Jetpack Compose Load Data (Flow.collectAsState) Common Mistakes (Compose Infinite Loop)
原文发表日期：2021.11.04
原文作者：Desmond Lua
翻译者：tommwq
翻译日期：2023.11.10

下面的数据类用于从firestore数据库加载数据。如果使用flow加载数据，必须确保获取数据的动作仅仅执行一次。

class CardViewModel : ViewModel() {
    val itemsFlow = flow {
      val items = MutableList((1..100).random()) { index ->
          index
      }
      emit(items)
    }
}

添加时间戳来检查数据加载次数。

fun CardScreen(viewModel: CardViewModel = viewModel()) {
    val items by viewModel.itemsFlow.collectAsState(initial = emptyList())
    Text("Items: ${items.size}, Time: ${LocalTime.now()}")
}

如果使用了函数，compose将进入死循环（时间戳将不断持续更新）。

class CardViewModel : ViewModel() {
    private val db = Firebase.firestore
    fun getItems() = flow {
      val items = MutableList((1..100).random()) { index ->
          index
      }
      emit(items)
    }
}

fun CardScreen(viewModel: CardViewModel = viewModel()) {
    val items by viewModel.getItems().collectAsState(initial = emptyList())
    Text("Items: ${items.size}, Time: ${LocalTime.now()}")
}

如果需要使用函数，必须在LaunchedEffect中调用函数。

fun CardScreen(viewModel: CardViewModel = viewModel()) {
    var items by remember { mutableStateOf<List<Int>>( emptyList()) }
    LaunchedEffect(true) { // only launch once
        viewModel.getItems().collect { 
            items = it
        }
    }
    Text("Items: ${items.size}, Time: ${LocalTime.now()}")
}

如果需要加载初始数据，并在每次点击按钮时加载数据：

fun CardScreen(viewModel: CardViewModel = viewModel()) {
    var refreshCount by remember { mutableStateOf(0) }
    var items by remember { mutableStateOf<List<Int>>( emptyList()) }
    LaunchedEffect(refreshCount) { // run if refreshCount is updated
        // you can choose to generate items based on refreshCount
        viewModel.getItems().collect {
            items = it
        }
    }
    // button click will 
    Button(onClick = { refreshCount += 1 }) {
        Text("Refresh")
    }
    Text("Items: ${items.size}, Time: ${LocalTime.now()}")
}

Date: 2023年11月10日

Created: 2023-11-10 周五 23:10