Jetpack Compose中LaunchedEffect无限循环问题求助

你的代码出现无限循环的核心原因是手动维护了本地状态stateData，并用它来控制LaunchedEffect的执行逻辑，同时在LaunchedEffect中持续订阅ViewModel的StateFlow，这种耦合的状态管理方式容易引发重组循环，尤其是在导航场景下，本地状态可能因Composable重建而重置，导致重复触发数据请求和状态更新。

另外，你当前的实现中，LaunchedEffect(Unit)在Composable每次重建时都会尝试创建，但由于key是Unit，它只会执行一次，但持续订阅StateFlow的逻辑会不断更新本地状态，进而触发多次重组。

直接使用Compose的collectAsState()来观察ViewModel中的StateFlow，去掉冗余的本地状态stateData，同时调整数据请求的触发逻辑，确保只在需要时执行一次。

修改后的UI代码 #

@Composable
fun ListView(
    viewModelItems: ItemsViewModel = viewModel(),
) {
    // 直接将ViewModel的StateFlow转换为Compose状态
    val listState by viewModelItems.state.collectAsState()

    // 仅在首次进入或需要重新请求时触发数据加载
    LaunchedEffect(Unit) {
        viewModelItems.getList()
    }

    // 根据StateFlow的状态渲染UI
    when(listState) {
        is Loading -> {
            // 加载中UI
        }
        is Success -> {
            // 成功展示列表UI
            val items = (listState as Success).data
            // ...
        }
        is Error -> {
            // 错误提示UI
        }
    }
}

优化后的ViewModel（可选） #

可以给getList()添加判断，避免重复发起请求：

class ItemsViewModel : ViewModel(){

    private var listState = MutableStateFlow<ListState>(Loading(null, 0))
    val state = listState.asStateFlow()

    fun getList(){
        // 避免当前正在加载时重复请求
        if (listState.value is Loading) return
        
        val res = SkovService.getInstance().getList()

        res.enqueue(object : Callback<Items?>{
            override fun onResponse(call: Call<Items?>, response: Response<Items?>) {
                listState.value = Success(response.body(), 1)
            }

            override fun onFailure(call: Call<Items?>, t: Throwable) {
                listState.value = Error(null, -1)
                call.cancel()
            }
        })
    }
}

1. 移除本地状态stateData：直接通过collectAsState()将ViewModel的StateFlow转换为Compose可观察状态，状态变化会自动触发重组，无需手动同步。
2. 简化LaunchedEffect逻辑：仅用LaunchedEffect(Unit)触发一次数据请求，避免因本地状态判断导致的逻辑混乱。
3. 避免重复请求：在ViewModel中添加请求状态判断，防止同一状态下重复发起网络请求。

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