Jetpack Compose中NavHost导航时可变状态引发无限重组问题

问题场景 #

点击按钮更新ViewModel中的状态，当状态变为1时触发跳转到SecondScreen，但此时FirstScreen会陷入无限重组，导致整个流程阻塞。

问题代码 #

MainActivity #

class MainActivity : ComponentActivity() {
    
     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
                val navController = rememberNavController()
                val viewModel : MainViewModel by viewModel()
                val state by viewModel.state.observeAsState()

                NavHost(navController = navController, startDestination = "firstScreen") {
                    composable("firstScreen") { FirstScreen(
                        navigate = {
                        navController.navigate("secondScreen")
                    }, updateState = {
                            viewModel.getState()
                       },
                       state

                    )}

                    composable("secondScreen") { SecondScreen() }
                }
        }
    }
}

ViewModel #

class MainViewModel : ViewModel() {

    //var state = MutableStateFlow(0)

    private val _state = MutableLiveData(0)
    val state: LiveData<Int> = _state

    fun getState()  {
        _state.value = 1
    }
}

FirstScreen #

@Composable
fun FirstScreen(
    navigate: () -> Unit,
    updateState: () -> Unit,
    state: Int?
) {

    Log.e("state",state.toString())

    Button(onClick = {
        updateState()
    }) {
        Text(text = "aaaaaaaa")
    }

    if(state == 1) {
        Log.e("navigate",state.toString())
        navigate()
    }
}

SecondScreen #

@Composable
fun SecondScreen() {...}

问题原因 #

原代码直接在FirstScreen的重组逻辑中判断state == 1并执行导航操作，导航会触发Compose重组，重组后又会再次检查状态并执行导航，形成无限循环。

修改方案 #

使用LaunchedEffect包裹导航逻辑，LaunchedEffect会在指定的依赖项（此处为state）变化时仅执行一次协程逻辑，避免重复触发导航导致的无限重组：

@Composable
fun FirstScreen(
    navigate: () -> Unit,
    updateState: () -> Unit,
    state: Int?
) {
    Log.e("state",state.toString())

    Button(onClick = {
        updateState()
    }) {
        Text(text = "aaaaaaaa")
    }

    LaunchedEffect(state) {
        if (state == 1) {
            Log.e("navigate", state.toString())
            navigate()
        }
    }
}

此修改通过将导航逻辑放入LaunchedEffect，确保仅在state变为1时执行一次导航，打破了无限重组的循环。

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