Jetpack Compose中回调副作用与错误的正确处理方式是什么？

你当前的思路不是完全错误，只是踩了Compose副作用和状态管理的几个常见坑，调整后就是符合规范的实现方案：

现存问题 #

1. 错误选择了副作用API：DisposableEffect适用于需要在生命周期结束时清理的资源（比如回调、订阅），而导航属于单次触发的副作用，应该用LaunchedEffect实现
2. 缺少一次性事件消费机制：导航、错误提示都属于一次性事件，消费后如果不重置状态，会出现回退到登录页重复触发导航、snackbar重复弹出的问题
3. 缺少加载状态维护，自然没法实现登录过程禁用表单的需求

方案1：ViewModel驱动全局状态（推荐，适合用户状态全局共享的场景） #

这种方案天然支持已登录用户进入登录页自动跳转的需求，状态集中维护更便于多页面共享。

改造ViewModel #

补全状态字段和消费方法：

class ExampleViewModel(application: Application) : AndroidViewModel(application) {
  var error: String? by mutableStateOf(null)
    private set
  var user: User? by mutableStateOf(null)
    private set
  // 新增加载状态
  var isLoading: Boolean by mutableStateOf(false)
    private set

  fun onLogin(email: String, password: String) {
    viewModelScope.launch {
      isLoading = true
      doLogin(email, password)
        .onSuccess { user = it }
        .onFailure { error = it.localizedMessage }
      isLoading = false
    }
  }

  // 事件消费方法，处理完副作用后调用重置状态，避免重复触发
  fun onNavigated() {
    user = null
  }

  fun onErrorShown() {
    error = null
  }
}

改造登录页 #

@Composable
fun LoginScreen(
  navController: NavController,
  exampleViewModel: ExampleViewModel,
) {
  // 用LaunchedEffect监听用户状态触发导航
  LaunchedEffect(exampleViewModel.user) {
    exampleViewModel.user?.let {
      navController.navigate("somewhere")
      exampleViewModel.onNavigated()
    }
  }

  var email by rememberSaveable { mutableStateOf("") }
  var password by rememberSaveable { mutableStateOf("") }

  // 邮箱输入框加载中禁用
  TextField(
    value = email,
    onValueChange = { email = it },
    enabled = !exampleViewModel.isLoading
  )
  // 密码输入框加载中禁用
  TextField(
    value = password,
    onValueChange = { password = it },
    enabled = !exampleViewModel.isLoading,
    visualTransformation = PasswordVisualTransformation()
  )
  // 登录按钮加载中禁用，加载时显示进度条
  Button(
    onClick = { exampleViewModel.onLogin(email, password) },
    enabled = !exampleViewModel.isLoading
  ) {
    if(exampleViewModel.isLoading) {
      CircularProgressIndicator(modifier = Modifier.size(20.dp))
    } else {
      Text("登录")
    }
  }
}

改造上层错误处理 #

LaunchedEffect(exampleViewModel.error) {
  exampleViewModel.error?.let { 
    scaffoldState.snackbarHostState.showSnackbar(it) 
    exampleViewModel.onErrorShown()
  }
}

方案2：UI层调用suspend方法处理结果（适合页面逻辑内聚的场景） #

如果你不想在ViewModel里维护事件消费逻辑，也可以把登录方法改成suspend函数，在UI层处理结果，同时单独保留全局用户状态的监听实现自动跳转：

改造ViewModel #

class ExampleViewModel(application: Application) : AndroidViewModel(application) {
  var user: User? by mutableStateOf(null)
    private set

  // 改为suspend函数直接返回执行结果
  suspend fun onLogin(email: String, password: String): Result<User> {
    return doLogin(email, password)
      .onSuccess { user = it }
  }
}

改造登录页 #

@Composable
fun LoginScreen(
  navController: NavController,
  exampleViewModel: ExampleViewModel,
) {
  val scope = rememberCoroutineScope()
  val snackbarHostState = LocalSnackbarHostState.current
  // 局部维护加载、错误状态
  var isLoading by remember { mutableStateOf(false) }
  var error by remember { mutableStateOf<String?>(null) }

  // 保留全局用户状态监听，实现已登录自动跳转
  LaunchedEffect(exampleViewModel.user) {
    exampleViewModel.user?.let {
      navController.navigate("somewhere")
    }
  }

  // 局部处理错误提示
  LaunchedEffect(error) {
    error?.let {
      snackbarHostState.showSnackbar(it)
      error = null
    }
  }

  var email by rememberSaveable { mutableStateOf("") }
  var password by rememberSaveable { mutableStateOf("") }

  Button(
    onClick = {
      scope.launch {
        isLoading = true
        exampleViewModel.onLogin(email, password)
          .onSuccess { navController.navigate("somewhere") }
          .onFailure { error = it.localizedMessage }
        isLoading = false
      }
    },
    enabled = !isLoading
  ) {
    Text("登录")
  }
}

关于snapshotFlow的说明 #

你考虑的LaunchedEffect(true) + snapshotFlow方案和直接用LaunchedEffect监听状态没有本质区别，仅在需要对状态做去重、防抖、过滤等特殊处理时才有优势，普通场景直接监听状态key即可，没必要额外封装。

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